lazy + Suspense: download on first use
The loader runs on the first render of Chart, not when the page loads. Once the module has arrived, lazy keeps it, so showing the chart again is instant.
Code splitting cuts your JavaScript into smaller files (chunks) that load only when needed: lazy(() => import("./Chart")) makes a component load on first render, <Suspense> shows a fallback meanwhile, and splitting by route plus preloading on hover keeps the first page fast without making later clicks slow.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Turn import MarkdownEditor from "./MarkdownEditor" into a lazily loaded component with a fallback.
The module ./Map.jsx exports export function MapView() {...} (no default). Load it lazily.
Explain it without notes
What is code splitting and why does it improve load time?
How do lazy and Suspense work together?
Why is route-level splitting a good default?
How can you avoid a loading delay when the user opens a lazily loaded feature?
Preview
Console
Nothing logged yet.Expected console output
Page loaded: nothing downloaded yet
Downloading the Chart chunk...
Area: Loading chart...
Chunk arrived
Area: 📈 Sales chart
Second time, no download: 📈 Sales chart