A Suspense boundary defines which part of the UI can temporarily show fallback content when something inside that boundary suspends. The placement of the boundary determines how much of the interface is replaced by loading UI. ### Large Boundary Example ```jsx }> ``` If any relevant content inside this boundary suspends, [React](/courses/reactjs) can show: ```jsx ``` for the boundary. This may be appropriate if the entire area should appear together. ### Smaller Boundary Example ```jsx }> }> ``` Now independent sections can reveal themselves separately. Conceptually: ```text Profile → available immediately Recommendations → its own loading state Comments → its own loading state ``` ### Boundary Placement Controls User Experience Too high: ```text small child waits → whole page replaced by spinner ``` Too low: ```text every tiny component → separate spinner → visually noisy interface ``` A good boundary usually represents a meaningful loading region. ### Prefer Skeletons for Large Content Areas For a full section, this: ```jsx }>

``` can provide a smoother layout than: ```jsx Loading...

}> ``` because the skeleton can preserve the expected size and shape of the content. ### Nested Suspense Boundaries Suspense boundaries can be nested: ```jsx }> }> ``` This allows different parts of a page to have different loading behavior. ### Suspense Does Not Automatically Handle Every Async Operation This ordinary Effect-based request: ```jsx useEffect(() => { fetch("/api/posts").then(...); }, []); ``` will not automatically cause a surrounding Suspense boundary to display its fallback. The child must use a Suspense-compatible source such as lazy-loaded code or compatible framework/data APIs. ### Loading Boundaries Should Match Design Boundaries A useful question is: ```text If this part is not ready, what is the smallest meaningful region that should temporarily show loading UI? ``` That is often a good place for Suspense. ### Interview-Ready Answer A Suspense boundary defines which subtree can temporarily display fallback UI when its content suspends. Boundary placement controls the loading experience: large boundaries load sections together, while smaller boundaries allow independent parts to appear separately. Boundaries should generally match meaningful visual loading regions rather than wrapping every tiny component.