React 18 was launched with out-of-the-box improvements like automatic batching, new APIs like startTransition, and streaming server-side rendering with support for Suspense.
The new features are built on top of the new opt-in concurrent renderer which is only enabled when someone uses a concurrent feature. Concurrency enables React to prepare multiple versions of a UI at the same time and it uses advanced techniques in its internal implementation such as priority queues and multiple buffering.
“When we design APIs, we try to hide implementation details from developers. As a React developer, you focus on what you want the user experience to look like, and React handles how to deliver that experience. So we don’t expect React developers to know how concurrency works under the hood,” the React team wrote in a blog post. “However, Concurrent React is more important than a typical implementation detail — it’s a foundational update to React’s core rendering model. So while it’s not super important to know how concurrency works, it may be worth knowing what it is at a high level.”
One key feature of Concurrent React is that rendering is interruptible. For example, when it starts to render an update, it can pause in the middle, then continue later and even abandon an in-progress render.
React guarantees that the UI will appear consistent even if a render is interrupted. It can prepare new screens in the background without blocking the main thread which means that the UI can respond immediately to user input even while rendering a large task.
Concurrent React can remove sections of the UI from the screen, then add them back later while reusing the previous state with reusable state.
React also said that it provided new APIs to make it easier for libraries to take advantage of concurrent features, expecting that the main way developers will add concurrency to their app is by using a concurrent-enabled library or framework.
The new automatic batching feature works when React groups multiple state updates into a single re-render for better performance. Also, the new transition feature distinguishes between urgent and non-urgent update.
New suspense features enable developers to declaratively specify the loading state for a part of the component tree if it’s not yet ready to be displayed.
In this release React also redesigned the APIs it exposes for rendering on the client and server. These changes allow users to continue using the old APIs in React 17 mode while they upgrade to the new APIs in React 18.
React is also working on expanding features such as Server Components which will allow developers to build apps that span the server and client to combine the interactivity of client-side apps with the improved performance of traditional server rendering.
