Add new post on React Suspense: What it is, how to use it, gotchas, patterns and more

[damassi]

This adds a new post on React Suspense: What it is, how to use it, gotchas, patterns and more.

Emphatically requesting proof-readers for this one 😅 🙏 There's a lot of detail here and my aim is to make the concepts absolutely clear so others don't have to repeat what I just went through 😄

Tagged a bunch of folks who might be interested to provide feedback/review. And if you've used suspense before I'm looking right at you!

cc @artsy/grow-devs

[orta]

Great post, I was thinking about how much I enjoyed using suspense boundaries yesterday after figuring out a few new places in my app to put them and it really helped simplify my loading states

Only knew it as an API consumer though, super cool to be guided through the internals. ( also hah, Forque)

[damassi]

Thanks for reading @orta! I've been channeling your inner writer lately.

And of course, all credit goes to @anandaroop on the clever Forque name 😄

[mc-jones]

Really clear rundown. Thanks for this! 👏

[damassi]

Follow up:

Closing this post as irrelevant! As I mentioned in the post (that there are DX issues with suspense that will likely get resolved) said DX issues have indeed been resolved. With latest version of react / next all of these patterns are now outdated, eg, you can simply await things in RSC, or use the use hook for pushing vanilla promises into the suspense chain, or use the useTransition hook to get fine-grained loading states outside of formal suspense boundaries:

// on the server 
const data = await somePromise() 

// on the client 
const data = use(somePromise)

For loading states, its as simple as

const [isLoading, startTransition] = useTransition()
const [fetch, data] = useSomeDataThing()
...
<Button loading={isLoading} onClick={() => {
  startTransition(() => {
    fetch()
  })
}} />

I might write a follow-up post explaining some of these very practically useful-to-know things. For example, suspense boundaries are such a UI headache to use in lots of cases, yet its never quite explained (anywhere) how quick and easy useTransition hooks are to use. Or that one can wrap promises with the new use hook, etc etc etc.

React is redeeming itself lately IMO, and will be fully redeemed once they finish support for CSS-in-JS runtimes in RSC (I will continue to maintain that eliminating CSS-in-JS runtimes is a solution in search of a problem, except for maybe the top 0.01% of performance needs; and even then, things are only getting faster). But till then 😠 😄