Lesson 16 of 80

Suspense & Lazy Loading

Q: How would you reduce a React app's initial bundle size using React.lazy and Suspense?

A strong answer covers: React.lazy defers a component's code download until it's actually rendered, enabling code splitting; Suspense provides a fallback UI to show while the lazy component's code (or other async work) is pending; A load failure is a real error, not a pending state — needs an error boundary around the Suspense boundary to handle it.

React.lazy splits your bundle so a component's code only loads when it's actually needed — Suspense is what shows a fallback while React waits for it.

13 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 2

A lazy component's dynamic import fails to load (e.g. a network error). Does the Suspense fallback stay showing forever?

No — Suspense only handles the pending state; an error boundary around it is needed to catch the failureYes, Suspense automatically retries forever until the import succeedsNo — the fallback disappears and the app silently renders nothing

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on Suspense & Lazy Loading

What interviewers actually ask about this, and what a strong answer has to cover.

How would you reduce a React app's initial bundle size using React.lazy and Suspense?

A strong answer covers

React.lazy defers a component's code download until it's actually rendered, enabling code splitting
Suspense provides a fallback UI to show while the lazy component's code (or other async work) is pending
A load failure is a real error, not a pending state — needs an error boundary around the Suspense boundary to handle it

Likely follow-ups

Can one Suspense boundary cover multiple lazy components at once?
Is Suspense specific to React.lazy, or does it support other async use cases?
Where in a real app would you draw the boundary — one top-level Suspense, or several nested ones?

Practice these with the AI interviewer →

The plain-language idea

React.lazy(() => import("./Chart")) doesn't load Chart's code immediately — it returns a component that, the first time it's rendered, kicks off the dynamic import() and suspends until that code arrives. <Suspense fallback={...}> is the boundary that catches that suspension and shows something in the meantime.

const Chart = React.lazy(() => import("./Chart"));

function Dashboard() {
  return (
    <Suspense fallback={<Spinner />}>
      <Chart data={data} />
    </Suspense>
  );
}

Before Chart's code finishes downloading, <Spinner /> shows. Once it arrives, React swaps in the real Chart — the user never sees a blank gap or a broken render, and Chart's ~50kb of code never had to be in the initial bundle at all.

Suspense: a waiting room for not-ready-yet contentStep 1 of 3

<Suspense fallback={<Spinner />}> wraps a subtree that might not be ready yet.

What people usually miss

Watch out

Suspense doesn't only work with React.lazy. It's a general mechanism for "pause rendering until this async thing resolves" — data-fetching libraries and React's own newer APIs (use()) can suspend too, not just code-split components.
One Suspense boundary can wrap multiple lazy components. If two siblings are both loading, one fallback covers both — you don't need (and usually don't want) a separate spinner for every single lazy piece.
A component rendering inside Suspense can still throw a real error — Suspense handles the "still loading" case; an actual failure (network error, thrown exception) needs an error boundary around the Suspense boundary to catch it.

Why this matters in interviews

"How would you reduce this app's initial bundle size?" is a very concrete performance question, and code-splitting heavy, rarely-used routes/components behind React.lazy + Suspense is usually the single highest-leverage answer.