When will you use this?

Apply when users complain the app feels slow, or Lighthouse shows red scores.

• Slow admin tables with thousands of rows need memo, lazy load, or virtualization.
• Lighthouse scores matter for public sites — clients notice slow pages.

Real-world: PDF viewer on demand

Invoice page loads lightweight summary first; PDF viewer chunk downloads only when user clicks "View PDF".

Production-style code

const PdfViewer = lazy(() => import('./PdfViewer.jsx'));

function InvoicePage({ invoiceId }) {
  const [showPdf, setShowPdf] = useState(false);
  return (
    <>
      <InvoiceSummary id={invoiceId} />
      <button onClick={() => setShowPdf(true)}>View PDF</button>
      {showPdf && (
        <Suspense fallback={<p>Loading viewer…</p>}>
          <PdfViewer url={`/api/invoices/${invoiceId}/pdf`} />
        </Suspense>
      )}
    </>
  );
}

What happens in production: Initial page weight drops — users who never open PDF never download the library.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

const Chart = lazy(() => import('./Chart'));

{showChart && (
  <Suspense fallback={<Spinner />}>
    <Chart data={data} />
  </Suspense>
)}

Line-by-line walkthrough

How it works (big picture)

• Chart.js loads only when showChart is true.
• Combine with Suspense for loading state.

Do this on your computer

1. Lazy load heavy routes and charts.
2. Use loading="lazy" on img tags below fold.
3. Measure bundle size before/after.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Open React DevTools (browser extension) while running Lazy Loading and inspect component props/state.

Remember

React.lazy for components. Native lazy for images. Load on demand.

Common questions