React 18 brings concurrent renderer, automatic batching

Major update to the popular JavaScript framework boosts performance by rendering multiple UI versions simultaneously and batching all updates by default.

React 18, a major upgrade to the popular JavaScript library, has moved to a release candidate (RC) stage, highlighted by a new concurrent renderer and automatic batching of updates.

Concurrent rendering allows React to prepare multiple versions of the UI at the same time. This mostly behind-the-scenes capability presents possibilities to improve app performance. New APIs were created to support concurrent rendering specific to use cases in areas such as styles, external stores, and accessibility. The developers of React have pledged a gradual adoption strategy for concurrent features. A new root API in React 18 enables the concurrent renderer, letting users opt into concurrent features. The API provides better ergonomics to manage roots.

[ Also on InfoWorld: Vercel, Netlify, and the new era of serverless PaaS ]

Out-of-the-box performance in React 18, meanwhile, is improved by doing more batching by default. Batching is when React groups multiple state updates into a single re-render for better performance. Previously, React only batched updates inside event handlers. Updates inside of promises, SetTimeout, native event handlers, or any other events were not batched by default. With React 18 they will be.

The React 18 RC was unveiled on March 8. To upgrade to the RC, use the following @rc tag:

npm install react@rc react-dom@rc

From Yarn, use the following:

yarn add react@rc react-dom@rc

Other new features and changes in React 18:

• A new development-only check was added to Strict mode. This check will unmount and remount every component whenever a component mounts for the first time, restoring the previous state on the second mount.
• For server rendering, react-dom/server APIs have been revamped to fully support Suspense on the server and Streaming SSR. With these changes, the old Node.js streaming API is being deprecated.
• Support is being dropped for Microsoft’s Internet Explorer browser. The Internet Explorer desktop application will be retired by Microsoft on June 15, 2022.
• ReactDOM.render is no longer supported. Use createRoot instead.