DEV Community

Devanshu Biswas
Devanshu Biswas

Posted on

I Built a React Suspense Lab: use(), Parallel Boundaries, useTransition & lazy()

#react #javascript #beginners #webdev

"A component suspends and the boundary shows a fallback" sounds abstract until you watch it happen. So I built four live Suspense boundaries you can trigger, each with the code beside it — including the newer use() hook.

▶ Live demo: https://suspense-lab.vercel.app/
Source (React 19): https://github.com/dev48v/suspense-lab

The model in one paragraph

When a component reads a not-yet-ready 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 thing:

function User() {
  const data = use(fetchUser());  // suspends until the promise resolves
  return <p>{data.name}</p>;
}

<Suspense fallback={<Skeleton />}>
  <User />
</Suspense>
Enter fullscreen mode Exit fullscreen mode

In React 19, use() is the clean way to read a promise (before it, you literally threw the promise and libraries like React Query did it for you).

Three things the lab makes obvious

Parallel boundaries load independently. Two sibling <Suspense> regions each show their own fallback and resolve on their own — the fast one renders while the slow one is still loading. No all-or-nothing wait for the whole page.

useTransition kills the fallback flash. A plain state update that re-suspends drops you back to the skeleton — jarring if you already had content. Wrap it in startTransition and React keeps the old content on screen while the new data loads:

const [pending, start] = useTransition();
start(() => setId(next));   // old UI stays, no fallback flash, isPending = true
Enter fullscreen mode Exit fullscreen mode

React.lazy code-splits for free. The lazy component ships in its own JS chunk that isn't downloaded until it's needed — and Suspense covers the network wait:

const Panel = lazy(() => import("./Panel"));
<Suspense fallback={<Skeleton />}>{show && <Panel />}</Suspense>
Enter fullscreen mode Exit fullscreen mode

You can literally see the separate LazyPanel-*.js file in the build output.

Why a lab

Suspense composes in ways that are hard to picture from the docs — nesting, parallel siblings, transitions that skip the fallback. Triggering each one and watching the skeletons appear and resolve turns "I think I get it" into "I get it."

If it made Suspense click, a star helps others find it: https://github.com/dev48v/suspense-lab

Top comments (0)