Code Splitting with lazy and Suspense

## The problem it solves A React app compiled into one bundle makes every user download every screen, including the admin panel they will never open and the rich text editor they use once a month. Code splitting breaks the bundle into chunks that are fetched on demand. React's built-in way to express a split point is `React.lazy` paired with `<Suspense>`: `lazy` marks *what* is split, `Suspense` says *what the user sees* while the split code is still travelling over the network. ## The API `lazy` takes one argument — a function (often called the loader or factory) that returns a promise — and returns a component you render like any other: ```jsx import { lazy, Suspense } from 'react'; const Settings = lazy(() => import('./routes/Settings')); function App() { return ( <Suspense fallback={<PageSkeleton />}> <Settings /> </Suspense> ); } ``` The crucial detail is that `import('./routes/Settings')` sits *inside* a function body. A static `import ... from` at the top of the file is resolved at build time and pulled into the current chunk; a call expression is a runtime decision, and every bundler treats it as a chunk boundary. React never fetches anything itself — it just calls your loader at the right moment and waits on the promise you hand back. React calls that loader **once**. It stores the settled result on the lazy component, so a second render of `<Settings />` uses the already-loaded module with no further work. ## The default-export contract The promise must resolve to an object with a `default` property holding a component. That is exactly the shape an ES module namespace object has when the file does `export default function Settings() {…}`, which is why the plain form works with no ceremony. If your component is a named export, reshape the result yourself: ```js const Chart = lazy(() => import('./Chart').then((m) => ({ default: m.Chart })) ); ``` The same trick is how people load one component out of a barrel file, though pointing the loader straight at the real module is better — a barrel drags its siblings into the chunk. ## Why Suspense is mandatory While the loader's promise is pending, the lazy component has nothing to render, so React *suspends*: it walks up from that position to the nearest `<Suspense>` ancestor and renders that boundary's `fallback` in place of its children. When the promise resolves, React re-renders and swaps the real content in. If there is no `<Suspense>` anywhere above, React has nowhere to put a placeholder and the render fails with an error. The boundary does not have to be the immediate parent — any ancestor works, and the *nearest* one wins. One boundary can cover several lazy components, in which case the fallback stays until all of them have loaded. That is a placement decision: a boundary wrapping the whole page turns the entire screen into a skeleton, while a boundary wrapping only a lazy chart keeps the rest of the page interactive. ## Where the `lazy` call goes Declare it at module scope. Calling `lazy` inside a component body produces a brand-new component type on every render, which makes React unmount and remount the subtree instead of reusing it. The idiomatic file has the `lazy` constants next to the imports. ## What it is not - It is not a data-loading tool. `lazy` splits *code*; fetching the data the component needs is a separate concern. - It does not work for anything but components. You cannot `lazy` a hook or a utility function — for those, call `import()` yourself where you need it. - It does not change *when the component renders*, only when its code arrives. The first render of a lazy route still blocks on a network round trip, which is why hover- or focus-triggered preloading is a common companion technique. ## React 19 notes `lazy` is unchanged in React 19 and remains the API for component-level splitting; `use()` reads a promise's *value* inside a render but is not a replacement for a split boundary. Suspense also drives streaming server rendering, so on a server-rendered app the same boundary that shows your fallback in the browser is the unit the server can stream around — but that is the rendering model's concern, not the split point's. ## What interviewers listen for They want to hear the three moving parts named without prompting: the loader returns a promise, the module resolves with a `default` component, and a `Suspense` ancestor supplies the fallback. Candidates who can also say *why* the dynamic call form is what creates the chunk — rather than treating `lazy` as magic that talks to the bundler — are visibly a tier above.