This site runs best with JavaScript enabled.

What the Fork is React Suspense?

Last tended Jun 16, 2020
Illustrated Notes
Web Development

Suspense is an upcoming React feature that's part of the new "concurrent mode."

Since everyone is getting all hyped up about it, I wanted to figure out what the excitement was and drew some quick summary notes.

Wtf is React supense?
Allows us to suspend rendering parts of our app until a particular condition is met, such as waiting until our data load. This keeps our interface interactive.
This allows us to prioritize the order that elements render in, based on those conditions. From high priority to low priority.
We create a suspense boundary around our components, and declare a fallback element to display while the data is loading.

This is a pretty lightweight intro, but you get the gist of it. CSS-Tricks has a nice in-depth write up on React Suspense in Practice

If you're looking to properly learn how React suspense works, Kent C. Dodds and Michael Chan both made egghead courses on it

Shareable Custom Hooks in React
Shareable Custom Hooks in React

Want to know what the fork is going on with other web development topics?

Take a look at What the Fork is xState?, What the Fork is Rust?, or the What the Fork is Babel?

Want to share?

Join the newsletter

For weekly notes on visual thinking, ethical technology, and cultural anthropology.

Maggie Appleton © 2021