How does Suspense work for data fetching, and what can trigger it?

<Suspense fallback={...}> shows its fallback while any component inside it is suspended. Suspended means the component cannot render yet, because something it needs is still loading. When everything is ready, React shows the content together.

Only Suspense-enabled sources can trigger it:

• lazy components
• reading a promise with use
• data fetching through Suspense-enabled frameworks and libraries, such as Next.js or Relay

Fetching in a useEffect or an event handler does not suspend. Suspense cannot see it.

With use, the promise should come from a cache or be created outside the rendering component. For example, a server component can pass it down. A promise created during a client render is new each time, so React would keep waiting on a fresh promise.

Two more controls:

• Nesting boundaries controls the loading order, like showing the page header before the comments.
• Wrapping an update in a transition keeps visible content on screen instead of replacing it with a fallback. A transition is an update you mark as non-urgent.