Suspense Patterns

Compare Suspense boundary granularity, fetch timing, and the effect of startTransition on perceived performance.

A. Coarse vs Fine Suspense Boundary

Left: one <Suspense> wraps all 3 islands → all wait for the slowest (2.4s). Right: each island has its own <Suspense> → they appear as they finish (0.6s, 1.4s, 2.4s).

Coarse — 1 boundary

Suspense Island Alpha

First item from the feed.

Suspense Island Beta

Second item from the feed.

React Suspense Docs

You are exploring Suspense patterns.

Error Boundary Guide

ErrorBoundary + toast is the right pattern.

Suspense Island Alpha

First item from the feed.

Suspense Island Beta

Second item from the feed.

Fine — per-island

Suspense Island Alpha

First item from the feed.

Suspense Island Beta

Second item from the feed.

React Suspense Docs

You are exploring Suspense patterns.

Error Boundary Guide

ErrorBoundary + toast is the right pattern.

Suspense Island Alpha

First item from the feed.

Suspense Island Beta

Second item from the feed.

B. Waterfall vs Parallel Fetch

Left: B starts only after A resolves (A: 1.2s then B: +1.0s = ~2.2s total). Right: A and B start simultaneously (max(1.2s, 1.0s) = ~1.2s total). The same use(a) + use(b) pattern — only the Promise creation differs.

Waterfall (~2.2s)

A: Suspense Island Alpha

First item from the feed.

B: React Suspense Docs

You are exploring Suspense patterns.

Parallel (~1.2s)

A: Suspense Island Alpha

First item from the feed.

B: React Suspense Docs

You are exploring Suspense patterns.

C. Stale-While-Loading (startTransition)

Without startTransition, replacing the Promise causes Suspense to immediately show the fallback. With startTransition, React keeps the existing content visible and uses isPending to indicate progress — no jarring flash.

Without startTransition

Old content disappears immediately — skeleton shows during fetch.

Suspense Island Alpha

First item from the feed.

Suspense Island Beta

Second item from the feed.

With startTransition

Old content stays visible. isPending signals the background refresh.

Suspense Island Alpha

First item from the feed.

Suspense Island Beta

Second item from the feed.