React 18 was officially released, including out of the box improvements such as automatic batch processing and new APIs

Time:2022-5-9

On March 29, react 18 was officially released. This version includes out of the box improvements, such as automatic batch processing, new APIs (such as starttransition) and streaming server-side rendering supporting suspend.

It is reported that many functions in react 18 are based on the new concurrent renderer, which is a behind the scenes change to unlock powerful new functions. Concurrent react is optional — it’s only enabled when users use the concurrency feature — but the development team believes thatIt will have a significant impact on the way people build applications

“We spent years researching and developing support for react concurrency, and we paid special attention to providing a gradual adoption path for existing users. Last summer, we established react 18 working group to collect feedback from community experts to ensure the smooth upgrade experience of the whole react ecosystem.”

In react 18, the user can start using suspend in relay and next JS, hydrogen or remix. Using suspend to obtain temporary data is technically feasible, but officials sayIt is not recommended as a general strategy

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

The development of server component is still in the testing stage. It allows developers to build cross server and client applications, and combines the rich interactivity of client applications with the improved performance of traditional server rendering. This feature is expected to be available in 18 X release the initial version in the minor version.

React 18 new features

Automatic batch processing

Batch processing is that react groups multiple state updates into one re rendering for better performance. If there is no automatic batch processing, we can only batch update in the react event handler.

By default, updates within 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 is a new concept in} react, which is used to distinguish between urgent and non urgent updates.

  • Urgent updates # reflect direct interaction, such as typing, clicking, pressing, etc
  • Transition updates transforms the 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 Suspend feature

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

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

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

In react 18, the server adds support for suspend and extends its functionality with concurrent rendering features. Suspend in react 18 works best when used in conjunction with the transition API. If you suspend during the transition, react will prevent the visible content from being replaced by “fallback”.

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 redesigned the APIs they exposed for rendering on clients and servers. 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 flexible to the effect of multiple mounts and destruction. Most effects work without any changes, but some effects assume they are mounted or destroyed only once. To help solve these problems, react 18 introduces a new development only check for strict mode.

Each time a component is installed for the first time, this new check will automatically uninstall and reinstall each component and restore the previous state on the second installation.

Original blog:

https://reactjs.org/blog/2022…