How does Suspense work for data fetching, and how are you using it in React 19?

A component suspends when it reads a promise that has not settled. React walks up to the nearest Suspense boundary, shows its fallback until the promise resolves, then renders the real content. In React 19 you read a promise with the use hook, normally created in a Server Component or a cache and passed down. Suspense coordinates loading states; it does not fetch anything itself.

Suspense is a coordination primitive, not a data layer. When a component reads a promise that has not resolved, it suspends, React finds the nearest boundary above it, renders that fallback, and retries the subtree when the promise settles. In React 19 the way you read one is the use hook, and the important rule is that the promise cannot be created during the render of the component calling use, otherwise you make a fresh promise every attempt and it never settles. So in practice the promise starts in a Server Component or comes out of a cache and gets passed down. On the server side that pairs with streaming: the shell goes out immediately, and slower sections stream in as their data lands. For boundary placement I try to wrap the smallest thing a user would accept seeing a skeleton for, so a slow recommendations panel does not hold up the product details. The trap is sequential awaits creating a waterfall, so I kick off independent fetches together before I await them.