⏳ Suspense for Data Fetching

? Quick Overview

React 19 introduces a more streamlined way to fetch data using Suspense combined with the new use() hook. Components can now suspend rendering until a promise resolves, letting React handle loading states declaratively.

? Key Concepts

• Suspense pauses rendering until async data is ready
• use() reads a promise directly inside a component
• Fallback UI is shown automatically during loading
• Works with concurrent rendering in React 19

? Syntax & Theory

Instead of managing useState and useEffect, you create a promise outside the component and consume it using use(). If the promise is pending, React suspends rendering and shows the nearest Suspense fallback.

? Code Example

// React 19 Suspense data fetching example using use()
import React, { Suspense, use } from "react";

const fetchUsers = async () => {
const res = await fetch("https://jsonplaceholder.typicode.com/users");
if (!res.ok) throw new Error("Failed to fetch users");
return res.json();
};

const usersPromise = fetchUsers();

function UsersList() {
const users = use(usersPromise);
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}

export default function App() {
return (
<div>
<h3>Users</h3>
<Suspense fallback={<p>Loading users...</p>}>
<UsersList />
</Suspense>
</div>
);
}

? Interactive Simulation

Click the button below to mimic how Suspense waits for data. Watch the "Fallback" turn into "Data".

?️ Use Cases

• Dashboards with multiple independent data sources
• Streaming UI with progressive loading
• Reducing loading-state boilerplate
• Future-ready concurrent React applications

? Interactive Flow Diagram