Suspense
Suspense lets components suspend rendering while waiting for asynchronous operations (code splitting, data fetching, streaming).
Mental Model
"The Theater Curtain: The stage crew arranges the set behind a decorative curtain (fallback) before revealing the live scene."
Interactive Engine Simulation
Executable Code Snippet
1<Suspense fallback={<Skeleton />}>
2 <DataGrid />
3 <Comments />
4</Suspense>
5
6// If ANY child is "suspending",
7// the fallback will be shown.- 01.Component re-renders are triggered by state or prop changes.
- 02.Reconciliation algorithm diffs the Virtual DOM to minimize actual DOM updates.
- 03.Automatic batching optimizes multiple state updates into a single render cycle.
01. Handling Uncertainty
`Suspense` is a component that lets you "wait" for some code to load and declaratively specify a loading state. Unlike manual loading flags (`if (loading) return ...`), Suspense allows you to coordinate multiple asynchronous components at the tree level.
Tree State
02. Beyond Code Splitting
In modern React frameworks (like Next.js), Suspense is also used for **Data Fetching**. A component can "suspend" while waiting for an API response. React will catch this "suspension" and show the nearest fallback until the data is resolved and the component can finish its work.
Architectural Advice
"Think of Suspense as a **Boundary of Order**. It prevents the 'Pop-in' effect where UI elements jump around as different data loads at different speeds. It keeps the UI stable until the content is ready."