On March 29, React 18 was officially released, and this version includes a number of out-of-the-box improvements such as automatic batching, new APIs such as startTransition, and streaming server-side rendering with Suspense support.

Many of the features in React 18 are described as being built on the new concurrent renderer. This is a behind-the-scenes change that unlocks powerful new features. Concurrent React is optional - it is only enabled when users use the concurrency feature - but the development team believes it will have a significant impact on the way the public builds applications.

The development team says its vision for Suspense has always been more than just loading code - the goal is to extend support for Suspense so that eventually the same declarative Suspense fallback can handle any asynchronous operation (loading code, data, images, etc.).

And development of the server component, which is still in beta, allows developers to build applications across servers and clients, combining the rich interactivity of client applications with the improved performance of traditional server rendering. This feature is expected to be released in an initial version in the 18.x minor release.

React 18 New Features

Automatic Batch Processing

Batching is React’s way of grouping multiple state updates into a single re-render for better performance. Without automatic batching, we would only be able to batch updates in the React event handlers.

By default, updates inside Promise, setTimeout, native event handlers, or any other event are not batched in React. With auto-batching, these updates will be automatically batched.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// Before: only React events were batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will render twice, once for each state update (no batching)
}, 1000);

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.`
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);

Transitions

Transitions is a new concept in React that distinguishes between urgent and non-urgent updates.

  • urgent updates reflect direct interactions, such as typing, clicking, pressing, etc.
  • Transition updates transform the UI from one view to another.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import {startTransition} from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

New Suspense functionality

Suspense allows you to declaratively specify the loading state of a part of the component tree if it is not ready to be displayed.

1
2

<Suspense fallback={<Spinner />}>
  <Comments /></Suspense>

Suspense makes the “UI loading state” a first-class declarative concept in the React programming model. This allows us to build higher-level functionality on top of it.

In React 18, the server adds support for Suspense and extends its capabilities with concurrent rendering features, and Suspense in React 18 works best when used in conjunction with the transition API. If you suspend during a transition, React will prevent content that is already visible from being replaced by a fallback.

Instead, React will delay rendering until enough data has been loaded to prevent incorrect loading states.

New Client and Server Rendering APIs

In this release, the development team has redesigned the APIs they expose for rendering on the client and server. these changes allow users to continue using the old APIs in React 17 mode when upgrading to the new APIs in React 18.

New Strict Mode Behavior

This feature will provide better out-of-the-box performance for React applications, but requires components to be resilient to effects that are mounted and destroyed multiple times. Most effects work without any changes, but some effects assume they are only mounted or destroyed once. To help address these issues, React 18 introduces a new dev-only check for strict mode.

This new check will automatically uninstall and reinstall each component whenever it is installed for the first time, and restore the previous state on the second installation.

Reference https://reactjs.org/blog/2022/03/29/react-v18.html