How does Suspense handle Data Fetching and nested loading states?

Short answer

Suspense lets a component pause rendering while waiting for asynchronous data and shows the nearest Fallback until the data is ready, avoiding manual isLoading checks.

Explanation

When a component suspends while waiting for a Promise, Suspense catches it and shows the fallback. This divides the page into independent areas, so fast components appear immediately while slow components show their own loading indicator without blocking the rest of the page.

Code example

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<MetricsSkeleton />}>
        <RealtimeMetrics />
      </Suspense>
      <Suspense fallback={<RecentOrdersSkeleton />}>
        <RecentOrders />
      </Suspense>
    </div>
  );
}

Common mistakes

• Wrapping the whole page in one Suspense boundary, making the entire page disappear and showing a large spinner when one small child is delayed.

Follow-up questions

• What is the new use() function in React 19, and how does it work with Promises and Context?
• What is Streaming SSR, and how does renderToPipeableStream work in Node.js?

Sources

• React docs — Suspense