-In JavaScript, when you `throw`, the closest `catch` above "wins", even if it's several function calls higher. Although Suspense works differently under the hood, the mental model is similar: if a component suspends, the closest `Suspense` component above the suspending component "catches" it, no matter how many components that are in between. In the above example, if `ProfileHeader ` suspends, then the entire page will be replaced with the `PageGlimmer`. However, if either `Comments` or `Photos` suspend, they together will be replaced with the `LeftColumnGlimmer`. This lets you safely add and remove Suspense boundaries according to the granularity of your visual UI design and without worrying which components exactly might depend on asynchronous code and data.
0 commit comments