Lazy Load a React Component with React.lazy and Suspense

Kent C. Dodds
InstructorKent C. Dodds
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

When you load an application, you don't want to load every component to the browser all at once. This can take forever to load, especially over a slow network.

With React.lazy, you can now code split your components and only load them when they are needed. Once a component is loaded, it will stay loaded within the application.

In this lesson, you will:

  • Lazy Load a component with React.lazy
  • Render that component with Suspense
  • Provide a fallback to Suspense that will render while the lazy loaded component is loading

Instructor: [00:00] Here we have a check-box that we can use to show and hide this cool Vanilla Tilt effect that we have here. But when we load the page, if we refresh here, we're going to see we're loading a bunch of JavaScript.

[00:10] We're loading the JavaScript that's necessary for something that's not even being shown on the page. Perhaps the user might come to this page and never actually show Vanilla Tilt. This can be an opportunity to optimize the performance of our application by utilizing code-splitting.

[00:25] Instead of importing Tilt from Tilt here -- where we are importing our vanilla-tilt library and the Tilt component itself -- we can lazy-load that Tilt component itself using React.lazy. We'll pass a function that returns a dynamic import for Tilt. We're going to assign that to Tilt.

[00:47] Then we can get rid of this import. We're going to render the Tilt component that React.lazy gives us. This relies on the Suspense feature in React. We need to have this Suspense component rendered somewhere above where this Tilt lazy-loaded component is going to be rendered.

[01:03] I'm going to take that Suspense. We'll render it right above the Tilt. We'll give it a fallback value of a div that says, "Loading."

[01:13] With that, I can click on "Show tilt." We'll see that that part of the JavaScript is loaded on demand, saving our users from downloading 3.5 kilobytes if they never actually use this feature.

[01:25] This can be a lot more useful if you're lazy-loading bigger libraries like D3. Let's go ahead and experiment here. I'm going to refresh. I'll switch this to a slow connection.

[01:37] Then if I click on "Show tilt," it shows that loading state fallback. It renders Vanilla Tilt when it's loaded.

[01:45] In review, to make this work, we simply remove the import of Tilt and replaced it with a React.lazy call using a dynamic import. Then we rendered Tilt assuming that it was actually already loaded just as we had before, making no changes to how we're using that component.

[02:01] But then we added the Suspense component from React and rendered that with a fallback value for what it should show while it's busy loading the Tilt component. I should note also that once we've loaded and rendered this one time, any subsequent renders of the Tilt component will render immediately because it's already been loaded.

egghead
egghead
~ 12 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today