React Holiday

#22: Don't collapse boundaries

Every time I teach suspense, folks feel an immediate need to collapse suspense and error boundaries into suspending view components.

I respect that urge but fight it.

Suspense and error boundary are designed to be mixed, matched, moved around for different experiences. They’re intentionally separated.

In fact, if we move suspense and error boundary components into the PokemonDetail render function, we’ll see a curious error.

Error occurred. PokemonDetail suspended while rendering, but no fallback UI was specified. Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.

The boundaries are ignored.
This is because suspense boundaries only catch outside of a suspending component’s definition.

Open today’s StackBlitz demo and play with the boundaries.
Make it break and get a sense of what is and isn’t allowed.

🐦 chantastic