Preload on hover, reveal in a transition
The download starts on hover, so by the click the chunk is ready and the panel appears with no fallback at all. Try it without startTransition (plain setOpen(true)): the fallback flashes for about 300 ms even though the code is already loaded, because React reveals content that was behind a shown fallback on a short throttle.
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
--- pointer enters the button
Download started
--- click
Area shows: ⚙️ Settings panel