May 20, 2022

What’s new in React 18?

React 18 is now available on npm and introduces features powered by their new concurrent renderer, with a gradual adoption strategy for existing applications.

Their latest major version includes out-of-the-box improvements like automatic batching, new APIs like startTransition, and streaming server-side rendering with support for Suspense.

Concurrent React

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.

It is not a new feature, “it’s a new behind-the-scenes mechanism that enables React to prepare multiple versions of your UI at the same time”, the React team wrote in a blog post

A key feature of Concurrent React is that rendering is interruptible. For example, when you start rendering an update, you can pause in the middle, continue later, and even abandon a rendering in progress. 

Suspense in Data Frameworks

The new suspense functions allow developers to declaratively specify the loading status of a part of the component tree if it is not yet ready to be displayed.

“Suspense works best when it’s deeply integrated into your application’s architecture: your router, your data layer, and your server rendering environment. So even long term, we expect that libraries and frameworks will play a crucial role in the React ecosystem”, the React team says.

Also, they informed us that as in previous versions of React, we can also use Suspense for code splitting on the client with React.lazy. But their vision for Suspense has always been about much more than loading code.

react 18

New Feature: Transitions

The new automatic batching feature works when React groups multiple status updates into a single repetition to improve performance. In addition, the new transition feature distinguishes between urgent and non-urgent update.

  • Urgent updates reflect direct interaction, like typing, clicking, pressing, and so on.
  • Transition updates transition the UI from one view to another.

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.

How to update? ReactJS official website.

Case Study from Arkusnexus

3065 Beyer Blvd B-2
San Diego CA 92154 - 349

mind hub tijuana