React Gets First Class Support for Async/Await — Yay or Meh?

A look into the React RFC Draft proposal support for data loading

Image by Author

The first cornerstone of React’s first-class support for Async/Await started when the team introduced Suspense on React 16.6. Back then, there was still no concurrent mode and its functionality was limited. The suspended component would render and just be hidden on the DOM. It was known as Legacy Suspense.

The Suspense was to become an important mechanism on which all the other APIs would rely.

When concurrent mode landed, the Suspense API was enhanced:

• The execution of the React Component is “paused”. The Element is not mounted until the ComponentThatSuspends is resolved.
• Effects/Lifecycle are fired properly.

As of today, lazy loading components is the only use case supported by Suspense. The React team has been spending a long time figuring out how to blend data loading with Suspense. In this published RFC Draft, we can finally see how they plan to build it.

Suspense for Data Fetching

The approach the React team is taking is quite conventional, but with a twist.

They have chosen to implement this feature in two flavors:

• React Client: by introducing a use hook
• React Server Components: supporting the native async/await Es7 syntax.

The use hook

This hook is as controversial as its name. They have chosen this particular name in an attempt to differentiate it from the rest. Why? Because this hook is different: it can run conditionally.

This alone breaks the whole conception of hooks that we have learned over the past years. It is quite remarkable how the React team has baked that idea into our heads. There even was a famous post from Dan Abramov explaining why in detail (link here).

How can the use hook be conditionally invoked? Because simplified, it just throws a Promise that is caught by the nearest Suspense parent.