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 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.