React 18 arrives with concurrent renderer, automatic batching

React 18, a major upgrade to the popular JavaScript library, is now available as a production release, highlighted by a new concurrent renderer and automatic batching of updates.

Concurrent rendering, or “Concurrent React,” allows React to prepare multiple versions of the UI at the same time. This behind-the-scenes capability serves as the basis for many new features in React 18. Concurrent React is opt-in, only enabled when concurrent features are in use.

A key property of Concurrent React is that rendering is interruptible. With a concurrent renderer, React may start an upgrade, pause in the middle, then continue later. React guarantees the UI will appear consistent even if a render is interrupted. Because new screens can be prepared in the background without blocking the main thread, the UI can respond immediately to user input even it is in the middle of a large rendering task, creating a fluid experience.

Concurrent React also can remove sections of the UI from the screen, then add them back later while reusing the previous state. Features built to take advantage of concurrent rendering include Suspense, transitions, and streaming server rendering. Concurrent rendering is a breaking change.

React 18 was unveiled as a production release on March 29, following a release candidate published on March 8. To upgrade to the new version:

npm install react react-dom

From Yarn, use the following:

yarn add react react-dom

Other new features and changes in React 18:

• Automatic batching is enabled, removing the need to manually batch updates in application or library code. Fewer renders are needed. Batching is when React groups multiple state updates into a single re-render for better performance.
• Suspense, for declaratively specifying the loading state for a part of the component tree, is enabled for opinionated frameworks like Relay and Next.js in React 18. Also, Suspense is supported on the server.
• Transitions distinguish between urgent and non-urgent updates.
• Client and server rendering APIs have been redesigned. Developers can continue using the old APIs in React 17 while upgrading to React 18 APIs.
• 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.
• Server components, for building apps that span both server and client, are expected in an upcoming minor release of React 18.x.