At the moment, all the JavaScript for our app is loaded when the app first loads. This is fine for small apps, but for large apps, this can have a negative impact on performance. There may be large pages that are rarely used in the app that we want to load the JavaScript for on demand. This process is called lazy loading.

We are going to lazy load the ask page in this section. It isn't a great usage of lazy loading because this is likely to be a popular page in our app, but it will help us learn how to implement this. Let's carry out the following steps:

1. First, we are going to add a default export to the AskPage component in AskPage.tsx: 

export const AskPage = () => <Page title="Ask a question" />;
export default AskPage;

2. Let's open App.tsx and import the lazy function and the Suspense component from React:

import React, { lazy, Suspense } from 'react';

3. Now, we are going to import the AskPage component differently after all the other import statements:

const AskPage = lazy(() => import('./AskPage'));

We can remove the previous import statement for the AskPage component. It is important that this is the last import statement in the file because, otherwise, ESLint may complain that the import statements beneath it are in the body of the module.

4. So, the AskPage component is being loaded on demand now but the App component is expecting this component to be loaded immediately. If we enter the ask path in the browser's address bar and press the Enter key, we may receive an error with a clue of how to resolve this:

5. As suggested by the error message, we are going to use the Suspense component we imported into the App component JSX earlier. For the /ask Route, we remove the component prop and nest the Suspense component as the Route child with the AskPage component as the child of Suspense:

<Route path="/ask">
  <Suspense
    fallback={
      <div
        css={css`
          margin-top: 100px;
          text-align: center;
        `}
      >
        Loading...
      </div>
    }
  >
    <AskPage />
  </Suspense>
</Route>

The Suspense fallback prop allows us to render a component while the AskPage is loading. So, we are rendering a Loading... message while the AskPage component is being loaded.

6. Let's go to the running app on the home page and open the browser developer tools by pressing F12.
7. On the Network tab, let's clear the previous network activity by clicking the no entry icon. Then, if we click the Ask a question button, we will see confirmation that additional JavaScript has been downloaded in order to render the AskPage component:

8. The AskPage component loads so fast that we are unlikely to see the Loading component being rendered. In the Chrome browser developer tools, there is an option to simulate a Slow 3G network in the Network tab:

9. If we turn this on, load the app again by pressing F5 on the home page, and click the Ask a question button, we will see the Loading... message being rendered temporarily:

In this example, the AskPage component is small in size, so this approach doesn't really positively impact performance. However, loading larger components on demand can really help performance, particularly on slow connections.