What the Fork is React Suspense?

Evergreen

🌳

Last tended Jun 16, 2020

Illustrated Notes

React

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.

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

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?

Linked References

Building Custom React Hooks

Last year the React team released a feature called "hooks" that lets you do some powerful stuff we couldn't do as easily before... Managing state. Accessing DOM elements. Using side effects. It's…

Building VR Apps with React360

Turns out you can build almost anything in React now... including VR and AR apps inside a web browser. There's a version of React called React 360 that simplifies the otherwise niche and overly…

Want to share?

Tell Twitter About It