[React] Preload React Components with the useEffect Hook

const Home = React.lazy(() => import(‘./screens/home‘))
const User = React.lazy(() => import(‘./screens/user‘))

function ErrorFallback({error}) {
  return (
    <IsolatedContainer>
      <p>There was an error</p>
      <pre style={{maxWidth: 700}}>{JSON.stringify(error, null, 2)}</pre>
    </IsolatedContainer>
  )
}

function App() {
  return (
    <ThemeProvider>
      <GitHubContext.Provider>
        <ErrorBoundary FallbackComponent={ErrorFallback}>
          <Suspense
            fallback={
              <LoadingMessagePage>Loading Application</LoadingMessagePage>
            }
          >
            <Router>
              <Home path="/" />
              <User path="/:username" />
            </Router>
          </Suspense>
        </ErrorBoundary>
      </GitHubContext.Provider>
    </ThemeProvider>
  )
}

const ui = <App />
const container = document.getElementById(‘root‘)

ReactDOM.render(ui, container)

function Home() {
  useEffect(() => {
    // preload the next page
    import(‘../user‘)
  }, [])
  return (
    <IsolatedContainer>
      <form
        onSubmit={handleSubmit}
        css={{
          display: ‘flex‘,
          justifyContent: ‘center‘,
          maxWidth: 240,
          margin: ‘auto‘,
        }}
      >
        <Input
          type="text"
          name="username"
          placeholder="Enter a GitHub username"
          autoFocus
          css={{
            borderRight: ‘none‘,
            borderTopRightRadius: ‘0‘,
            borderBottomRightRadius: ‘0‘,
            minWidth: 190,
          }}
        />
        <PrimaryButton
          css={{
            borderTopLeftRadius: 0,
            borderBottomLeftRadius: 0,
          }}
          type="submit"
        >
          Go
        </PrimaryButton>
      </form>
    </IsolatedContainer>
  )
}