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 Suspense
today.
React.lazy and Suspense sitting in a tree
React v16.6
introduced React.lazy
—
A way to code-split in client-rendered applications by components.
import React from "react"
const LazyLoadedComponent = React.lazy(() => import("./SomeComponent"))
function MyApp() {
return (
<React.Suspense fallback={<div>Waiting...</div>}>
<LazyLoadedComponent />
</React.Suspense>
)
}
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,
The fallback
is presented.
Once resolved, children
are presented.
But Suspense needs a translator
Suspense
can't magically know all the promises it's children
may or may not have.
That's where lazy
comes in.
It acts as a translator.
lazy
wraps a dynamic import
and communicates Pending
and Resolved
states to the nearest Suspense
component boundary.
(code here).
Suspense
will resolve fallback
or children
accordingly.
The future™️
As we move into a Suspense
future, you'll see this pattern more often:
A Suspense
boundary (with fallback
)
And data, wrapped in "translator" (React.lazy
, ReactCache.createResource
, etc).
What's Next? Errors
Not all promises resolve.
Some are Rejected
.
I'll show you how to handle that state next time.
Top comments (2)
I was just listening to your podcast today about this ;)
When I saw the post on top of the feed, I thought it was due to user data being collected via podcast and sold, so dev.to knows what to recommend. By hey, Chantastic himself is posting, it’s not algorithm I guess!
haha! happy to surprise you on a different platform!
hoping to cover Suspense/Concurrent quite a bit the rest of the year, while working out an egghead course.
Anything Suspense related you'd like to see covered?