React 18 is officially released, including out-of-the-box improvements like automated batching, new APIs, and more

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

According to reports, many of the features in React 18 are built on top of the new concurrent renderer, a behind-the-scenes change that unlocks powerful new features. Concurrent React is optional -- it's only enabled when users use the concurrency feature -- but the development team believes it will have a major impact on the way the masses build applications .

“We’ve spent years researching and developing support for React’s concurrency, and we’ve paid special attention to providing a gradual adoption path for existing users. Last summer, we formed the React 18 Working Group to gather feedback from community experts to ensure that the entire React A smooth upgrade experience for the ecosystem.”

In React 18, users can start using Suspense to fetch data in frameworks like Relay, Next.js, Hydrogen, or Remix. It is technically feasible to use Suspense to obtain temporary data, but officials say it is not recommended as a general strategy .

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

While development of the server component is still in beta, it allows developers to build applications that span both server and client, 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 release in the 18.x minor release.

React 18 new features

automatic batch processing

Batching is React's grouping of multiple state updates into a single re-render for better performance. Without automatic batching, we can only batch updates in React event handlers.

By default, updates inside Promise, setTimeout, native event handlers, or any other event are not batched in React. With automatic batching, these updates are automatically batched:

 // 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 are a new concept in React to differentiate between urgent and non-urgent updates.

• urgent updates reflect direct interactions such as typing, clicking, pressing, etc.
• Transition updates transition UI from one view to another

 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 Features

If a part of the component tree is not ready to be displayed, Suspense allows you to specify its loading state declaratively:

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

Suspense makes "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 added support for Suspense and extended its capabilities with concurrent rendering features. Suspense in React 18 works best with transitionAPI. If you suspend during a transition, React will prevent already visible content from being replaced by fallbacks.

Instead, React delays rendering until enough data is loaded to prevent an incorrect loading state.

New client and server rendering APIs

In this release, the development team has redesigned the API they expose for rendering on the client and server. These changes allow users to continue using the old API in React 17 mode when upgrading to the new API 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 the effects of multiple mounts and destroys. Most effects work without any changes, but some effects assume that they are mounted or destroyed only once. To help address these issues, React 18 introduces a new development-only inspection for strict mode.

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

​Blog original text:

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