React 18’s new APIs

This article will cover these three new APIs, their use cases, what problems they solve, why they were added, and how they integrate into the realm of concurrent rendering.

A note before we begin

As all of these new APIs are related to concurrent rendering, I’d recommend that you first familiarize yourself with the concept and why the React team is focusing on it so much. A good place to begin is the from React or the. After that, the following sections will make a lot more sense.

The useSyncExternalStore Hook

One of the APIs introduced in React v16.14.0 to accommodate concurrent rendering was , which was intended to allow React components to safely and efficiently integrate with external mutable sources during concurrent rendering.

The Hook would attach to a data source, wait for changes, and schedule updates accordingly. All of this would happen in a way that would prevent, which is when visual inconsistencies arise because there are multiple values for the same state.

This is an especially prominent issue with the new concurrent rendering features because state flows can become intertwined very quickly. However, adopting useMutableSource proved to be difficult for the following reasons:

1. The Hook is naturally asynchronous

The Hook doesn’t know whether it can reuse the resulting value of the selector function if it changes. The only solution was to re-subscribe to the provided data source and retrieve the snapshot again, which can cause performance issues because it happens on every render.

For users and libraries (like ), it meant that they had to memoize every single selector in their project and weren’t able to define their selector functions inline because their references weren’t stable.

2. It has to deal with external state

The original implementation was also flawed because it had to deal with states that live outside of React. This meant the state could change at any time due to its mutability.

Because React tried to solve this asynchronously, this would sometimes cause visible parts of the UI to be replaced with a fallback, resulting in a sub-optimal user experience.

All of this made it a painful migration for library maintainers and a suboptimal experience for both developers and users.

Solving these issues with useSyncExternalStore

To address these problems, the React team changed the underlying implementation and renamed the Hook to useSyncExternalStore to properly reflect its behavior. The changes include:

The only requirement is that the resulting value of the getSnapshot Hook argument needs to be referentially stable. React uses this internally to determine whether a new snapshot needs to be retrieved, so it either needs to be an immutable value or a memoized/cached object.

As a convenience, React will provide an additional version of the Hook that automatically supports memoization of getSnapshot‘s resulting value.