How would you place `lazy` and Suspense boundaries for code splitting?

Splits meaningful code, keeps stable UI visible, preloads likely paths, and pairs loading with error recovery.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

lazy loads a component's module when it is first rendered, and the nearest Suspense boundary shows a fallback while that code is unavailable. I split at meaningful route or feature boundaries, not every component. The fallback preserves surrounding navigation and layout, and an error boundary handles a failed chunk because Suspense represents waiting, not failure.

Full answer below

Practice focus

React `lazy`, Suspense, chunk boundaries, fallback UX, transitions, preload strategy, and chunk failure recovery.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Overview
A small bundle is not automatically a fast experience if users repeatedly wait on fragmented chunks or lose stable context.
lazy loads a component's module when it is first rendered, and the nearest Suspense boundary shows a fallback while that code is unavailable. I split at meaningful route or feature boundaries, not every component. The fallback preserves surrounding navigation and layout, and an error boundary handles a failed chunk because Suspense represents waiting, not failure.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I inspect bundle composition and real navigation before choosing a split. Heavy editors, charts, admin tools, or rarely used flows are better candidates than tiny shared controls. Likely next routes can be preloaded on intent or idle time within a budget. Boundaries are nested so a delayed panel does not blank the whole page, and transitions can keep already revealed content visible while a new view loads.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Lazy-loading every small component.
Using one page-wide fallback for independent regions.
Assuming Suspense catches chunk errors.

How would you place `lazy` and Suspense boundaries for code splitting?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue practice

Prerequisite

Tech stacks

Skill areas

Human editorial direction

Was this drill useful?

Found this answer useful?