`Suspense` lets [React](/courses/reactjs) display fallback UI while a child component is not ready to render. A Suspense boundary defines both: ```text Content that may temporarily suspend + Fallback UI shown while waiting ``` ### Basic Example with Lazy Loading ```jsx import { lazy, Suspense } from "react"; const Dashboard = lazy(() => import("./Dashboard") ); function App() { return ( Loading dashboard...

}> ); } ``` The flow is: ```text Dashboard requested ↓ component code is not ready ↓ Dashboard suspends ↓ Suspense shows fallback ↓ code becomes ready ↓ Dashboard renders ``` ### Suspense Is a Boundary Imagine: ```jsx }> ``` If content within the boundary suspends, [React](/courses/reactjs) can show: ```jsx ``` while waiting. ### More Focused Boundaries Sometimes separate loading states provide a better experience: ```jsx }> ``` Now the entire page does not need to disappear merely because `Posts` is waiting. A Suspense boundary should usually correspond to a meaningful loading region in the interface. ### Suspense Is Not a Generic try/catch for Promises This does not automatically become Suspense-aware simply because it uses a Promise: ```jsx useEffect(() => { fetch("/api/users") .then(...); }, []); ``` Traditional Effect-based fetching does not automatically activate a surrounding Suspense boundary. Suspense works with Suspense-enabled resources such as: ```text React.lazy Compatible frameworks Compatible data sources and libraries Modern React APIs designed for Suspense ``` ### Suspense and Concurrent Rendering Suspense becomes particularly powerful with React's concurrent rendering architecture. Suppose a user is already viewing a page and navigation causes new content to suspend. React can sometimes coordinate the old and new UI instead of immediately replacing useful content with a loading fallback. Transitions help communicate that navigation or UI change as non-urgent. Conceptually: ```text Current useful UI ↓ start Transition ↓ new UI begins rendering ↓ new content suspends ↓ React can coordinate loading without unnecessarily destroying current interaction ``` ### Suspense Does Not Fetch Data by Itself This is a common misconception. ```jsx }> ``` Suspense does not automatically send: ```text GET /profile ``` It coordinates what React displays while compatible child content is waiting. Something else is responsible for loading the data or code. ### Suspense vs Loading State Manual loading: ```jsx if (loading) { return ; } ``` puts loading logic inside the component. Suspense lets a parent boundary [express](/courses/expressjs): ```text If this subtree is not ready, show this fallback. ``` Both patterns can exist in React applications depending on the data architecture being used. ### Interview-Ready Answer Suspense is a React boundary that displays fallback UI when compatible child content is not ready. It commonly works with lazy-loaded components and Suspense-enabled frameworks or data sources. Suspense does not fetch data itself and ordinary `useEffect` fetching does not automatically trigger it. Combined with concurrent rendering and transitions, Suspense can provide smoother loading experiences without unnecessarily replacing already useful UI.