Thread by @AdamRackis

The React team are some of the best web developers in the world. But sometimes they struggle to explain things to normal people—ie folks who have no fucking clue what "algebraic effects" are (like me!)

So with that, here's my serious attempt at explaining suspense

1/

For simplicity I'll talk in the first person, as though I were one of the devs making Suspense, and announcing it. Again, this is just to keep the messaging simple. I'm not deluded enough to think I could work on that team.

Hey, you know how when you browse to a new section in your web app, the new page's component lazily loads, since you wrapped it in React.lazy()? Well guess what: we have some new primitives that'll make that loading much smoother.

Basically we cooked up some dank shit that'll let you render the new page off to the side, in memory, and when it's all set and ready, we'll *then* show it.

And of course you'll know when it's loading, so you can show a spinner.

And you can even specify a timeout / fallback, so if the loading takes a long-ass time, you can render some notification or whatever.

Cool, right?

Devs:

React team:

Devs:

We expose the primitives that track the lazy component's loading to you, and you can integrate it into said component.

So if you want, you can now have the component announce that it's not ready yet, pending data that's in flight.

And the route will keep waiting until it is

So now, instead of having a spinner on top of your app, while the "admin component" of your app loads, which shows, then immediately has a spinner of its own while data fetches, you can just have the admin page not actually be "ready" until the data are there

This'll give you one nice reveal of a finished page, instead of cascading spinners.

Data shows that users like better.

Devs:

React team:

Remember how we said your component could block on data it needs, so your lazy loaded component didn't show until it was really ready?

The shit that governs that is low level, and allows you to block on any number of data dependencies easily, *anywhere* in your component tree

So if your admin component renders 3 children which need data, they can choose to read it a little differently, and all 3 of those pieces of data will be loaded in parallel as the in-memory rendering of your component happens. And it won't render until *all* are ready.

Devs:

Hey and ya know how normally you savage assholes request your data only when the component renders? It'd be better if you preloaded that data AS the component's code is loading over the network, rather than fetching it once the component renders.

That has nothing to do with suspense, we have some examples of how to fix it.

Your data fetching libraries will need to change, but they probably will, and hey, Relay already has the pieces in place, today, if you wanna use that.

Remember, preloading data prior to your component rendering is just an optimization that has jack-shit to do with Suspense. You should have been doing it already. We're just guiding a bit better as to how best this can be done.

If you're interested in what a full data preloading solution with Suspense might look like, and how it works, check out this blog post some toxic shit-posting Ken Wheeler wannabe wrote.

adamrackis.dev/suspense-expla…