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: