React 18 New Features and Update

React is an open-source JavaScript UI library designed by Facebook, it has gained a lot of popularity in the front-end developer community.

React 18 was released in March 2022. This latest release includes performance improvements with updates to the rendering engine. This update does not change your codebase.

Since the introduction of hooks in React 16 in 2019, no major update has been done in React 17 up till React 18 where we now have some cool and exciting features.

In this tutorial, I will cover some of the features released in React 18.

What are the Features?

Let's dive into some of the cool features introduced in the new features

How to upgrade or update to React 18

I will be using npm, however, you can choose any package manager of your choice. To update simply npm install react@18 react-dom@18 and replace the first code with the first code.

import ReactDom from "react-dom/client";
import App from "./App";

ReactDom.Render(<App>, documment.getElementById("root");
root.render(<App />);

import ReactDom from "react-dom/client";
import App from "./App";

const root = ReactDom.createRoot(document.getElementById("root");
root.render(<App />);

Concurrent in React 18

This major addiction in React 18 allows the preparation of multiple UI to concurrently render transactions asynchronously without interruption by delegating and prioritising urgent and most important updates simultaneously without blocking to re-render in the components. You can refer to Dan Abramov example with the React 18 Working group discussions.

However, we can only achieve this update to React 18 and leverage the useTransition() hook for functional components or startTransition() function where hooks can not be used and. useDeferredValue() to delay update until new one is ready.

// React 17, or 18, without concurrent mode.
import ReactDOM from 'react-dom';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// create a root
const root = ReactDOM.createRoot(container);

//render app to root
root.render(<App />);

Refer to the React 18 working team discussion for more information.

Automatic State Batching in React 18

The grouping of multiple state updates together into a single re-render to improve performance is called batching in React. In React, batching helps to reduce the number of re-renders that happen when a state changes, when you call setState. The Automatic batching feature was available in React 17 but only works with asynchronous event handler function, but now it comes out of the box in React, but if you want to opt-out you can use ReactDom.flushSync().

// React 17
  setTimeout(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // The component will be rendered twice.
  }, 1000);

// React 18
  setTimeout(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // The component will be rendered only once.
  }, 1000);

New Start Transition API to keep your app responsive

Transitions can be used to mark UI updates that do not need urgent resources for updating. This update is very useful in handling unresponsive app during large screen updates or heavy update operations by splitting states into two categories: urgent and low priority.

import { startTransition } from 'react';

// Updating state with urgent priority
setInputValue(input);

// Inside startTransition the updates won't be urgent
// and can be interrumpted
startTransition(() => {
  setSearchQuery(input);
});

Suspense

Finally, an architectural improvement to the react server-side rendering. A component and concept that helps with UI updates related to code and data fetching by code splitting on the server with suspense or streaming HTML rendering on the server.

<Suspense fallback={<LoadingSpinner />}>
<LazyComponent />
</suspense>

For a detailed overview of client vs server rendering, check out Shaundai Person’s React Conf 2021 talk.

Conclusion

React 18 features includes improvements that make React more like a FullStack app with impactful possibilities for the community.

Sources:

React Official Blog Site
FreeCodeCamp Blog Site.

rowjay