React 18 is out and includes the long-awaited concurrent renderer, which enables React to offer several improvements, including the ability to interrupt the rendering process.
Until React 18, the React render process was synchronous and non-interruptable. As a result, the UI would lock during long render processes and not respond immediately to user input.
With the new concurrent renderer, the rendering process becomes asynchronous and can be interrupted, paused, resumed, and even abandoned - allowing developers to provide a more fluid user experience.
The React team does not expect most application developers to directly interact with the new concurrent mode. Instead, they expect that, in most cases, adaptation will be made via 3rd party libraries and frameworks.
To enable the new concurrent renderer and benefit from the new capabilities discussed below, developers need to update the client rendering API using the new createRoot method. A full explanation can be found in the official upgrade guide.
Automatic Batching is a new performance enhancement that enables React to batch state updates into a single re-render even when they happen within async and native events.
The following code sets two counters within a setTimeout. Before React 18, this would result in two separate renders. With the new automatic batching React can now group the two-state changes into a single re-render.
As the name implies, this optimization happens behind the scenes and does not require developer intervention.
setTimeout(() => {
setCount1(c => c + 1);
setCount2(c => c + 2);
}, 100);
Transitions are a new concept in React that enable developers to flag a change as non-urgent. This means they can be interrupted by urgent updates such as key presses or mouse clicks.
To mark state updates as non-urgent developers can wrap them with the new startTransition method like the following example:
startTransition(() => {
setFilter(newFilter);
});
As mentioned above, most application developers are not expected to use this API directly.
The React Suspense API has been re-implemented for the concurrent render allowing for improved server rendering. Developers can now circumvent slow-loading components that would block the site from loading by first loading a placeholder such as a spinner.
The rest of the application can load first, avoiding a potentially long wait time with a blank screen.
Developers who wish to learn more about the new capabilities of the suspense API should read through the suspense Request For Comments for an in-depth discussion. Unfortunately, the new suspense API documentation is sparse.
Finally, in the feature, React will add the ability to remove sections of the UI while preserving their state. To verify that current components are compatible with the upcoming capability, React added a new development only check to the Strict Mode.
Further details about the release can be found in the changelog. React is released under an MIT License.