[React] Preload React Components with the useEffect Hook

Let's say we are using 'React.lazy()' to lazy load some Router:

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)

 

One problem for lazy loading router is that for slow connect user, it takes take to switch page. What we can do to solve the problem is by preload the lazy loaded router.

 

Let's say once user arrived on 'Home' Page, we assume he will continue to 'User' page. So we will preload 'User' page inside Home page.

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>
  )
}