Lazy Load a React Component with React.lazy and Suspense

InstructorKent C. Dodds

Share this video with your friends

Send Tweet

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