The suspense quest Inside React's Magic
summary
Explains how Suspense actually works: components throw the promise during render, the React work loop catches it, climbs the fiber tree to flag the nearest Suspense boundary, attaches a listener, and restarts rendering from that boundary so the fallback appears; resolved promises add a render flag to retry. Children remain mounted in an offscreen fiber visible=false to preserve state. Notes that React pre-renders siblings of the first child, that useSuspenseQuery can throw all promises at once to parallelize, and that a proposed R19 change to stop prerendering was rolled back.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 1:00Why use suspense
- 2:13How React Works
- 6:50What is Suspense
- 7:40First render
- 13:40How suspense works
- 15:46Two queries in a row
- 16:35What can we do
- 17:07Did you know
related talks
39mReact … wait for it … Suspense
18mExploring React 18's Streaming Capabilities with Suspense for SSR
10mServer Rendering & Suspense, Hydration Improvement
31mMoving To Suspense
42mSolidJS: Why all the Suspense?
26mReact Suspense
26mReact, the future & you
35mAlgebraic effects, Fibers, Coroutines...Oh my!