React hooks load page chunk (code splitting)

App.tsx

import React from 'react';
import { Router } from "@reach/router";
import LoadComponent from './LoadComponent';

const FoobarLoader = () => import('./pages/Foobar');

const App: React.StatelessComponent<{}> = () => (
  <div>
    <Router>
      <LoadComponent componentAsPromised={FoobarLoader} path="foobar" />
    </Router>
  </div>
);

export default App;

LoadComponent.tsx

import React, { useState, useEffect, createElement, FunctionComponent } from 'react';
import { RouteComponentProps } from '@reach/router';

interface Chunk {
    default: FunctionComponent<RouteComponentProps>
}

interface Props extends RouteComponentProps {
    componentAsPromised: () => Promise<Chunk>
}

const BeforeLoad = <React.Fragment />; // or Loading Message

const LoadComponent: FunctionComponent<Props> = ({ componentAsPromised, ...props }) => {
    const [renderer, render] = useState(BeforeLoad);

    const onLoadComponent = ({ default: LoadedComponent }: Chunk) => render(createElement(LoadedComponent, props));                       
  
    useEffect(() => {
        componentAsPromised().then(onLoadComponent);
    });
  
    return renderer;
}

export default LoadComponent;