Learn

When we load a component like <DrivingDirectionsMap> with React.lazy(), the component will download as its own chunk separately from the main bundle. However, React won’t be able to render the <DrivingDirectionsMap> component separately from our main bundle. Instead, React will wait until all chunks are downloaded, after which it will display our app.

To tell React to load the rest of our app first, then insert our lazily loaded component, we can use the <Suspense> component from React.

The <Suspense> component instructs React to load every part of our app except the components imported with React.lazy(). While those components download, <Suspense> will show a loading state. Once the lazily loaded component is ready, <Suspense> will insert the component to our app.

Here’s what React’s <Suspense> syntax looks like:

import React, { Suspense } from 'react';

// ...

const DrivingDirectionsMap = React.lazy(() => import('./DrivingDirections)); 

// ...

return (
  <Suspense fallback={<p>Loading...</p>}>
    <DrivingDirectionsMap />
  </Suspense>
)

In the example above, the <Suspense> component has the <DrivingDirectionsMap> component, imported with React.lazy(), as its child.

<Suspense> also takes one prop named fallback, which is a React component used to display a loading state while its children load. In the example, while <DrivingDirectionsMap> is downloading, the UI will display a paragraph with the text “Loading…” until the <DrivingDirectionsMap> component s ready to be displayed.

When importing components with React.lazy(), we should always wrap the lazily loaded component in React’s <Suspense> component, so that the lazily loaded component may render into our app after the rest of our app. This will allow our apps to load quickly on the first render, then fill in with components that are expensive to download.

Instructions

Task 1

Go to the project’s home page (‘/‘), and then click on “Exercise 7: Suspense”.

Task 2

Reload the page and notice that the page stays blank for about 1 second. Then, it displays all of our UI at once.

In ./src/pages/Exercise7/index.js, look at how the <Details> component is imported. We import it with React.lazy(), then we artificially make it take 1 second before we return the <Details> component to simulate a slow internet connection.

In the markup of <Exercise7>, why does delaying the loading of the <Details> component cause the app to show a blank screen for 1 second?

Hint

Without React’s <Suspense> component wrapping the <Details> component, React does not know how to render the rest of our app separately. So, instead, React waits until it is able to display the <Details> component, then it renders the entire <Exercise7> component.

Task 3

Let’s make the <Details> component render after the rest of the <Exercise7> component.

Import and apply React’s <Suspense> component. Make sure to provide <Suspense> with a fallback prop.

Note: We added a <Loader> component, located at ./src/pages/Exercise7/Loader.js, to use as the fallback component.

Hint

Import Suspense from React:

import React, { Suspense } from 'react';

Then, add the <Suspense> component to the markup with <Details> as its child. Its syntax follows this pattern:

<Suspense fallback={...}>
  <ExampleComponent />
</Suspense>

If you’re stuck, you can find the solution code in ./src/pages/Exercise7/solution/index.js.

Task 4

Reload the page. This time we should see a few new things:

First, the app loads nearly instantly.
Secondly, we should see the component passed to the fallback prop appear while <Details> is loading.
After 1 second, we should see the <Details> component pop into our app.

Sign up to start coding

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?