Catch Your Suspense Errors
Not every promise resolves.
Some are rejected.
So, when we use
React.Suspense to show loading and loaded states,
We need to consider exceptions as well.
Suspense effectively, you have to to make use of
The React docs have a copy and paste-able
You really only need one of these things.
So copy and paste it into your code and customize to your needs.
This one is customized slightly for demos.
- It assumes you don’t have a logging service and uses
- It takes a
fallbackprop for custom messages — much like
Suspense components with an error boundary to
handle these three possible states:
- pending —
- resolved —
- rejected —
I see a lot of people immediately jump to wrapping
It’s not a good look.
Separate, they give you nuanced control over your entire view.
Stick layout components in between,
Handle errors closely,
Or have only one
ErrorBoundary around a bunch of
The world is your oyster. Keep ‘em separate and keep control.
Right now, we’re using
React.lazy to do the work of communicating pending, resolved, and rejected states to our
Next, we’ll talk about creating our own wrappers to interact with this Suspense API.