Image for post
Image for post

React Async v9 and beyond

Introducing Suspense support and Async Library

Gert Hengeveld
Oct 7, 2019 · 3 min read

It’s been a while since Dan Abramov , the future vision for async rendering and data fetching in React. Users of have been asking about Suspense support ever since that early announcement. Suspense for Code Splitting was in October 2018, but Suspense for Data Fetching was until late 2019.

With the year’s end drawing closer, we can finally start preparing for its arrival. That’s why with support for Suspense. Even though it’s marked experimental, you can already start using <Suspense> as a replacement for <Async.Pending> today.

Image for post
Image for post
Wrap your Async components with Suspense.

The way Suspense works is similar to React Async’s pending state, but also very different. While <Async.Pending> has to be a descendant of your Async component, <Suspense> must be an ancestor. That’s because with Suspense, pending promises are thrown, so they traverse up the tree until they are caught by an error boundary, in this case the <Suspense> component. One benefit of this behavior is that you can use a single Suspense boundary for multiple Async components, which wasn’t possible before.

Suspense integration for React Async is currently opt-in. In order to enable it, you have to pass the suspense flag. It works with both the useAsync and useFetch hooks, as well as the <Async> component. Our initial implementation does not include any type of cache, so it will not yet provide the performance optimizations that Suspense brings. This will change in an upcoming release, when the details of react-cache are fleshed out.

Becoming a community project

React Async as a project has made some great strides lately. Over the summer I’ve decided to shift my attention from developing the product, to making it a community project. Inspired by conversations at , I announced a partnership with several open source contributors in September.

Besides these first joiners, we are looking for others to get involved. This can be your project as much as it is ours. Please . All contributions are welcome. Among other things, work is underway to .

Async Library

To make this a real community project, React Async has moved from my personal GitHub account to a newly created organization. is the name of the overarching project and was chosen akin to . The goal of Async Library is to provide a unified way to develop asynchronous UI states and aims to be framework agnostic. It builds from a core library which is essentially a state machine around promises (and possibly streams), to provide a for asynchronous state in user interfaces. On top of that we’ll provide integration with other libraries, including React, Redux, Axios, GraphQL, Web Workers, Vue, Svelte and whatever else the community comes up with. There’s a to support. As you can see this is highly ambitious, and can only succeed with community support.

You may have noticed the React Async readme now shows a sponsorship badge. We’ve accepted a sponsorship deal from which involves a modest monthly financial contribution. These funds are solely meant to be used towards the project’s goals and will be managed responsibly. Furthermore, my employer (known for Storybook) allows me to work on React Async in company time, which is the greatest contribution any company can make towards open source.

Thanks

Let me wrap this up by thanking everyone who has contributed to this project so far (we currently list ), or will do so in the future. In particular I want to thank , and for helping me kickstart the community effort.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store