React 18 released

React 18 is now out , and this release includes out-of-the-box improvements like automatic batching, new APIs like startTransition, and support for streaming server-side rendering with Suspense.

The announcement states that many of the features in React 18 are built on top of the new concurrent renderer, a change that unlocks powerful new features. Concurrent React is optional and will only be enabled when users use concurrency, but the development team believes it will have a significant 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. ”

The new features of React 18 are as follows:

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 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 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 Suspense feature. Suspense allows you to specify the loading state of the component tree declaratively if a part of the component tree is not ready to be displayed:

<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.

React 18 added support for Suspense on the server and extended its capabilities with concurrent rendering features. Suspense in React 18 works best with the transition API. If you suspend during transition, React will prevent already 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. 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 Behaviors . 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 unmount and remount each component whenever a component is mounted for the first time, and restore the previous state on the second mount.

* React mounts the component.
  * Layout effects are created.
  * Effects are created.
* React simulates unmounting the component.
  * Layout effects are destroyed.
  * Effects are destroyed.
* React simulates mounting the component with the previous state.
  * Layout effects are created.
  * Effects are created.

More details can be viewed: https://reactjs.org/blog/2022/03/29/react-v18.html

Guess you like