What is React.lazy?

Learn to lazily load components with React.lazy.

What is React.lazy?

React.lazy loads a component on demand instead of at the initial render. This enables code splitting; the app's initial bundle shrinks.

Usage is simple: const Heavy = React.lazy(() => import('./Heavy')). When the component is called, the module is fetched from the browser. During this time a loading indicator is needed.

This is where Suspense comes in; it shows a fallback until loading completes.

Suspense boundary

The Suspense component shows a fallback while its children load. The fallback prop takes the content to render during loading.

Example: <Suspense fallback={"{"<Spinner />}"}><Heavy /></Suspense>. Until Heavy loads, Spinner renders; once loaded, Heavy renders.

You wrap Suspense around the lazy component. With multiple lazy components a single Suspense can wrap them all.

Exercise lazy and Suspense

Complete the skeleton below. Define Heavy with React.lazy; write an App component that returns <Suspense fallback={"{"<Spinner />}"}><Heavy /></Suspense>. Export it.

Show example solution

import { lazy, Suspense } from "react";

const Heavy = lazy(() => import("./Heavy"));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Heavy />
    </Suspense>
  );
}

export default App;

Test yourself

What does React.lazy provide?
- Code splitting
- Faster rendering
- Daha az state
- Daha az prop
Show answer

Code splitting — React.lazy provides code splitting; the initial bundle shrinks.

lazy call

const Heavy = React.lazy(() => ____);

Show answer

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

What is React.lazy: match the terms

React.lazy

Dynamic import
Suspense

Loading boundary
fallback

Fallback content
import()

Loads a module

Next lesson: Suspense boundary

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies