• Wed. Dec 25th, 2024

React 18 brings concurrent renderer, automatic batching

Byadmin

Mar 10, 2022


React 18, a major upgrade to the popular JavaScript library, has moved to a release candidate (RC) stage, highlighted by a new concurrent renderer and automatic batching of updates.Concurrent rendering allows React to prepare multiple versions of the UI at the same time. This mostly behind-the-scenes capability presents possibilities to improve app performance. New APIs were created to support concurrent rendering specific to use cases in areas such as styles, external stores, and accessibility. The developers of React have pledged a gradual adoption strategy for concurrent features. A new root API in React 18 enables the concurrent renderer, letting users opt into concurrent features. The API provides better ergonomics to manage roots.Out-of-the-box performance in React 18, meanwhile, is improved by doing more batching by default. Batching is when React groups multiple state updates into a single re-render for better performance. Previously, React only batched updates inside event handlers. Updates inside of promises, SetTimeout, native event handlers, or any other events were not batched by default. With React 18 they will be.The React 18 RC was unveiled on March 8. To upgrade to the RC, use the following @rc tag:npm install react@rc react-dom@rcFrom Yarn, use the following:yarn add react@rc react-dom@rcOther new features and changes in React 18:
A new development-only check was added to Strict mode. This check will unmount and remount every component whenever a component mounts for the first time, restoring the previous state on the second mount.
For server rendering, react-dom/server APIs have been revamped to fully support Suspense on the server and Streaming SSR. With these changes, the old Node.js streaming API is being deprecated.
Support is being dropped for Microsoft’s Internet Explorer browser. The Internet Explorer desktop application will be retired by Microsoft on June 15, 2022.
ReactDOM.render is no longer supported. Use createRoot instead.

Copyright © 2022 IDG Communications, Inc.



Source link