Use Suspense Today
Believe it or not, you’ve had access to
Suspense for a year.
Yes, there is more suspense to come.
Yes, that “more” isn’t totally ready.
No, that doesn’t mean you can’t use
A way to code-split in client-rendered applications by components.
lazy depends on
Suspense to present a fallback while the lazily-loaded component is fetched.
In that way,
Suspense acts as a boundary for asynchronous data.
If a promise inside a
Suspense boundary is pending,
fallback is presented.
children are presented.
Suspense can’t magically know all the promises it’s
children may or may not have.
lazy comes in.
It acts as a translator.
lazy wraps a dynamic
import and communicates
Resolved states to the nearest
Suspense component boundary.
Suspense will resolve
As we move into a
Suspense future, you’ll see this pattern more often:
Suspense boundary (with
And data, wrapped in “translator” (
Not all promises resolve.
I’ll show you how to handle that state next time.