What’s New with React 18?
Introduction
With batching, concurrency, transition API and more React 18 looks promising. Each time a new version is released, the framework is getting better and better. The most used JavaScript framework, React is the most used to build modern apps with vast and incredible features.
The team at React announced a version 18 release plan. There’s a working group created to prepare the community to adapt to the new features gradually. There are numerous API changes and important features in the next React version.
New Features and Changes
1. New Root API
To keep track of the tree renders, the ‘root’ is the pointer to the data structure level used by React. The root, moreover, in the API legacy, was opaque to users because they attached it to the element of DOM, and accessed it with DOM node without exposing it to users. Storing to the DOM node, however, is not needed for the root.
There are some concerns with the running updates, including the need to pass the container into the render continuously, even if it stays the same. The new root API addition resolves this issue, so passing the container into a render is no longer needed. Moreover, the root API changes allow removing the hydrate method and replacing it with a root option.
2. New Start Transition API
This keeps the app responsive. It’s one of the most significant updates, which keeps the app responsive during big screen updates. Moreover, the API enables users’ control of the concurrency aspect to boost user interaction. It’s done by wrapping heavy updates as ‘start Transition’ and would only be interrupted if there are more urgent updates initiated.
It, therefore, actually classifies slow and urgent updates. If user actions interrupt the transition, React throws away the unfinished stale rendering work and renders only the latest update.
3. Automatic Batching Enhancement
Batching is nothing more than grouping multiple state updates of React into one render state to achieve better computational performance. In the earlier React version, batching was done only for React event handlers. In the case of any other events, however, like set timeouts, updates inside a promise, asynchronous state updates, set timeouts, and native event handlers, updates are not by default, batched in React.
This is resolved by adding automatic batching in version 18 using Root API. All updates would be batched automatically regardless of their origin.
4. Architectural Improvements, new suspense SSR
With the server-side rendering of React 18, an architectural enhancement is added. The server-side rendering, additionally, generates HTML from the components of React on the server and returns it to the client. Now, the client is able to see the content of the page before the bundle load and run of JavaScript.
There is, however, a drawback of SSR. It does not enable components to wait for data. Meaning that before HTML rendering to the client, there should be data ready for server components. You also need to wait for all components to be hydrated before interacting with them.
The issue could be overcome with two new features of suspense, such as Selective hydration and Streaming HTML.
Wrapping Up
React 18 includes out-of-the-box enhancements and new features that are impactful. Moreover, it has cleared the way for new React app development possibilities.
The new version will bring a lot of powerful features to boost the developer experience as well as help create amazing web experiences. It unlocks new possibilities and boosts performance.
More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.
