Comparison
Error boundaryvsSuspense boundary
Error boundary
one component threw and you showed a fallback for that section instead of a blank white page.
A component that catches errors thrown during rendering below it and shows a fallback instead of unmounting the whole tree. It is the only thing standing between a null-dereference in a widget and an empty document. It does not catch errors in event handlers, in async callbacks or on the server, which is why teams that add boundaries still get blank pages from the paths boundaries cannot see.
Full entry →Suspense boundary
you wrapped the slow part in a boundary and the rest of the page rendered without waiting for it.
A declared point in the tree where a fallback is shown while descendants are still loading, letting the rest of the page render around it. It replaces per-component loading flags with one place that decides what the pending state looks like. Where you place the boundary is a design decision, not a technical one: too high and the whole page flashes, too low and the layout fills in as a series of jumps.
Full entry →