React 18 Announced: Key Features Expected

Recently, React’s official website announced a new update to be launched for React, the React 18. Although with no specific release date announced and being available only in alpha, React 18’s latest release additions seem very promising.

ReactJS is an open-source library that runs on Javascript and has been very popular amongst software developers in the past few years. It has also been considered a great resource for startups and business leaders. Designed by Facebook, it gained popularity owing to its ability to help create UI rich web apps that are fast and efficient, developed with minimal coding. The simplicity and flexibility of React are what connected with its users. Conglomerates such as PayPal, Uber, and Instagram use React to solve their user interface problems. 

Here’s a roundup of the latest additions and changes to be expected in React 18:

Automatic Batching 

Batching occurs when React groups multiple updates together into a single render state for achieving better computational performance. This also prevented the components from rendering “Half-Finished” states where only one state variable was updated before, causing several bugs at times. However, React would not batch the updates every time and rather perform two independent batches. React 18 will be added with a performance improvement update, where it will automatically batch the updates, irrespective of origin, for both the application and the library code. The updates inside of timeouts, promises, or even native event handlers will be batched the same way as the updates inside of React events. This will add an out-of-the-box improvement to the rendering time and even better performance. With this issue addressed in React 18, it makes the batching process more efficient and consistent. Click here to see a demo of how the new batching technique works. 

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    fetchSomething().then(() => {

      // React 18 and later DOES batch these:

      setCount(c => c + 1);
      setFlag(f => !f);
      // React will only re-render once at the end (that's batching!)

    });
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}
}

Code Source: React’s Github

Added Feature: startTransition for Concurrent Rendering

During interactions with the user interface for small actions like clicking a button or typing an input, page freezing may occur, disrupting the workflow. In React 18, a new API known as startTransition has been introduced that helps keep the app responsive even during large screen updates. The API substantially improves the user interactions by marking specific movements as “transitions ”. This allows for React to be informed about which updates are important and which are not. Transitions here are interrupted by urgent updates, and the prior irrelevant transitions are dismissed. This enables the UI to ignore secondary updates that might be slower in nature. startTransition moves the updates to the background, consisting of either complex processing or slowed data fetching due to network connectivity. You can further understand this through a real-world example from the link here. 

New Suspense SSR and Selective Hydration 

Server-side rendering, also known as SSR, is a component that lets you generate HTML from React components directly on the server and share the HTML with users. Users can see a preview of the page through SSR even before the javascript bundle presents loads and runs. But sometimes, the javascript on the backend takes a long time to get processed, and the time taken is known as Hydrating Time. React 18 will include architectural improvements to the React SSR’s performance. The new update will allow Streaming HTML directly on the server, i.e., the server sends pieces of components as they get rendered using another component known as Suspense, which decides which parts of the application might take longer to load and what shall be rendered directly. Using a selective hydration method, components that are wrapped with Suspense will not block hydration anymore. Every ready component will start hydrating once the browser gets both its content and javascript code. Checkout a real world demo to this update using the link here. 

Improvements to Root API

Root API in React is a pointer for the top-level data structures on the application that React uses to track a render tree. Two different root APIs will be deployed when using the new React 18  version, the Legacy root API and ReactDOM.createRoot. The Legacy root API will run a legacy mode root API, trigger warnings when the API is deprecated, and suggest moving it to the new root API. The new root API known as ReactDOM.createRoot will add all the improvements to the application and allow concurrent mode features. 

Old root API :

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App';
ReactDOM.render(<App />, document.getElementById('root'));

New root API :

import ReactDOM from 'react-dom';
import App from 'App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

One of the biggest changes of the new root API will be removing the hydrate method, and a prop to the top-level component present will be passed.  

Easy Upgrade 

As concurrency in React 18 is subjective, with minimal to no changes in the already created application codes, one can upgrade to React 18 version easily. Users will be able to convert several apps to React 18 within a single afternoon. The company has tested this by deploying several concurrent feature components at Facebook, and most components reportedly work without making additional changes. . 

Summing Up 

With many minor features yet to be announced, the new React 18 update looks impactful. The new React has opened up new possibilities, ones that were previously impossible to have in a Javascript framework. All these changes, once implemented, will surely be sources of inspiration for other available frameworks in the market. React 18 has been professionally crafted and looks in line with the best practices one can avail. To know more about how to install the alpha version for React 18 click the link here.