React › Suspense & Concurrent Rendering

How can Suspense be used directly for data fetching, beyond just code splitting?

Advanced

Answer

Certain data fetching libraries and frameworks, including newer patterns in React itself, let a component suspend rendering while data is still being fetched, letting the same Suspense fallback mechanism handle both loading code and loading data in a unified, consistent way.

// A simplified example using a Suspense-compatible data fetching approach
function ProfileDetails() {
  const user = use(fetchUserPromise); // suspends until the promise resolves
  return <p>{user.name}</p>;
}

<Suspense fallback={<p>Loading</p>}>
  <ProfileDetails />
</Suspense>

Real-world example A modern data heavy dashboard uses a Suspense compatible data fetching approach so that every section of the page, no matter how it loads its data, shows a consistent loading experience controlled by the same Suspense boundaries.

Common follow-ups: How is this different from the traditional useEffect plus useState pattern for fetching data?;What libraries currently support this Suspense based data fetching approach well?

Data Fetching (React Query & SWR);Server Components