React Async v9 and beyond
Introducing Suspense support and Async Library
It’s been a while since Dan Abramov revealed Suspense, the future vision for async rendering and data fetching in React. Users of React Async have been asking about Suspense support ever since that early announcement. Suspense for Code Splitting was released in October 2018, but Suspense for Data Fetching was postponed until late 2019.
With the year’s end drawing closer, we can finally start preparing for its arrival. That’s why we’ve just released React Async v9 with support for Suspense. Even though it’s marked experimental, you can already start using <Suspense> as a replacement for <Async.Pending> today.
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 EXPAND Conference, 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 join the Discord server. All contributions are welcome. Among other things, work is underway to migrate React Async to TypeScript.
Async Library
To make this a real community project, React Async has moved from my personal GitHub account to a newly created organization. Async Library is the name of the overarching project and was chosen akin to Testing Library. 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 standardized API 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 ton of use cases 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 Rollbar 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 Chroma (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 22 contributors), or will do so in the future. In particular I want to thank Lenz, Sébastien and Norbert for helping me kickstart the community effort.
