Suspense with lazy: loading code on demand
The code "downloads" only on the first render of <Chart />, never at startup. lazy calls its loader once and caches the result.
<Suspense fallback={...}> shows a fallback while anything inside it is still loading (lazy code, a promise read with use(), a Suspense-enabled library), lets you nest boundaries to control what appears together, and works with transitions to keep the old screen visible instead of flashing a spinner.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A product page has Details (fast), Reviews (slow) and Recommendations (slowest). Write the JSX so details appear first, and reviews and recommendations each fill in independently.
Load a Settings panel with lazy only when a button is clicked, with a fallback that says Loading settings....
A SearchResults component suspends while results load. Make typing a new query keep the old results visible (dimmed) instead of showing the fallback.
Explain it without notes
What does Suspense do, and what kinds of things can make a component suspend?
How do nested Suspense boundaries control the reveal order? What happens to two components in the same boundary?
Why can a transition prevent a loading fallback from appearing, and when should you use one?
How does lazy work with Suspense?
Preview
Console
Nothing logged yet.Expected console output
before click: (nothing)
downloading Chart code...
100 ms after click: Loading chart...
700 ms after click: 📈 Chart