Nested boundaries and the reveal order
Header is ready at 300 ms but waits for Sidebar (600 ms): they share a boundary. The comments fallback only appears with them, and comments come last. Press Run again and watch the stages.
<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
shown: page fallback
shown: header
shown: sidebar
shown: comments fallback
shown: comments