⚛️ Suspense Lab

React Suspense, made tangible. A component "suspends" by reading a promise with use(); the nearest <Suspense> shows a fallback until it resolves. Watch parallel boundaries load independently, useTransition skip the fallback flash, and React.lazy code-split a component into its own chunk.

▶ Live demo  ·  What's inside  ·  Run locally

---

Why

Suspense sounds abstract — "a component suspends and the boundary shows a fallback" — until you watch it happen. This has four live boundaries you can trigger, each with the code beside it, so the model (and the newer use() hook) clicks.

What's inside

1. Suspense basics — a component reads a promise with use(); until it resolves it suspends, and the nearest <Suspense> shows a skeleton. Reload → it suspends again.
2. Parallel boundaries — two independent <Suspense> regions resolve on their own, so the fast one shows content while the slow one is still loading. No all-or-nothing wait.
3. useTransition — no fallback flash — a plain reload drops back to the skeleton; wrapping the update in startTransition keeps the old content on screen (isPending) while the new data loads. Side-by-side buttons to feel the difference.
4. React.lazy — code splitting — the panel lives in its own JS chunk (you can see LazyPanel-*.js in the build) that isn't downloaded until you ask for it; Suspense covers the network wait.

How it works under the hood

When a component reads a not-yet-ready promise (via use(), or historically by throwing the promise), React suspends that subtree and walks up to the nearest <Suspense> to render its fallback. When the promise resolves, React retries the render and swaps the real content in. That's the whole model — and it composes: boundaries nest, siblings load in parallel, and useTransition lets you keep the old UI visible instead of falling back while new data streams in.

Run it locally

npm install
npm run dev
npm run build      # note the separate LazyPanel chunk in the output

Contributing

Ideas: <Suspense> + error boundary combo, streaming SSR note, useDeferredValue vs useTransition, a waterfall-vs-parallel data-fetching comparison. PRs welcome.

If this made Suspense click, a ⭐ helps others find it.

License

MIT © dev48v