How do Suspense and React.lazy work for code splitting?

Question

Accepted Answer

**`React.lazy`** loads a component's JavaScript bundle **on demand** (only when it first renders). **`Suspense`** shows a fallback UI while any lazy (or data-suspending) child is still loading. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Why it matters: smaller initial load Without code splitting, the browser downloads your **entire** app (including the heavy charting library) before showing anything. With `lazy`, `Chart`'s code is split into its own file and fetched only when the user actually reaches it — improving initial load time and Core Web Vitals. ## How Suspense coordinates it When `Chart` suspends (its bundle isn't ready), React "pauses" that part of the tree and renders the nearest `Suspense` fallback instead, then swaps in the real component once it loads. A single boundary can wrap several lazy children and show one fallback: ```jsx }>

``` ## Beyond code splitting Suspense also coordinates **data loading** with frameworks/libraries that "suspend" on a pending fetch, and pairs with **streaming SSR** (Next.js App Router) to send a fast shell and stream slower parts in. Place boundaries thoughtfully to avoid large, jarring layout shifts when content pops in.