Stop 08 · ReactTopics · 14/20

Lazy Loading

In short

Why make a user download the admin dashboard's code when they only opened the home page? Lazy loading splits your bundle so each part arrives only when it's needed.

Deferring the loading of a component's code until it's actually needed, using `React.lazy()`, to reduce your app's initial bundle size.

Think of it like this

The pani puri bhaiya

He doesn't fill all fifty puris the moment you walk up. He fills one, hands it over, then makes the next when you're ready. Lazy loading serves your app's code the same way: one piece at a time, right when you need it.

Watch it happen

Code that arrives on demand

You

Report

Suspense

Chart chunk

click Show chart

1/6You click the button, and show becomes true.

The big ideas

What you need to know

Code splitting

Bundlers like Vite turn each dynamic import() into a separate file that downloads on demand.

lazy() wraps a component

const Admin = lazy(() => import("./Admin")) loads Admin's code the first time it renders.

Needs a Suspense fallback

While the file downloads, the nearest Suspense shows its fallback, like a spinner.

Split by route first

Pages are the easiest win, since users rarely open every page in one visit.

See it in code

Walk through the code

tsx

1import { lazy, Suspense, useState } from "react";2// Chart.tsx must have a default export3const Chart = lazy(() => import("./Chart"));4export default function Report() {5  const [show, setShow] = useState(false);6  return (7    <>8      <button onClick={() => setShow(true)}>Show chart</button>9      {show && (10        <Suspense fallback={<p>Loading chart...</p>}>11          <Chart />12        </Suspense>13      )}14    </>15  );16}

1/3lazy takes a function that imports Chart. Nothing downloads yet.

Chart's code, and any heavy chart library it imports, isn't downloaded until the button is clicked. Watch the Network tab to see the new file arrive.

Save yourself the pain

Common mistakes

Oops

Calling lazy() inside a component.

Do this instead

Declare lazy components at the top level of the file. Inside a component, a new one is created each render and its state resets.

Oops

Lazy loading tiny components like buttons.

Do this instead

Each split adds a network request. Split big, rarely used chunks like pages, editors and charts.

Your mission

Split your routes

~20 min

Quick check

You write lazy(() => import("./Chart")), but Chart.tsx only has export function Chart. What happens?

Go deeper

1Convert a rarely used route/component to `React.lazy()` + dynamic import.
2Check your bundle analyzer before/after to see the code-splitting effect.
3Pair lazy loading with `Suspense` to show a fallback while it loads.