What's New in React 18

Introduction

React is a very popular open-source JavaScript library created by Facebook in 2013. Owing to its flexibility, a lot of developers harness some of its features in building fast, efficient, and reusable user interface (UI) components.

In March 2022, the team launched the most recent and anticipated version of the React library, React 18, which includes new features that focus on improving the application performance.

The New Features in React 18

React 18 consists of some cool new features added to the open-source JavaScript library. Many of these changes were not in the previous version while other features were improved upon. Some of these features include; a new root API, Automatic Batching, Transition API, Suspense API and the release of new Hooks.

New Root API

The root API in React keeps track of how the top-level component is rendered in the tree. In the previous versions of React, the render method was used to execute rendering which is now called the legacy root API.

However, React 18 comes with a new root API which creates a root using the createRoot method and then renders a React component to the created root using the render method.

This new root API will give you access to the features in this recent version such as the transition API feature discussed later. While the old way will still work in React 18, it may be phased out in the future.

The snippet below shows how the root API is structured in both the legacy and new ways.

• Legacy Root API

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

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

• New Root API

import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />)

Automatic Batching

Batching in React involves multiple state updates in a single re-render on every browser event for example a click event. Any state changes that occurred outside an event like a promise or callback will not be batched.

With React 18, batching state updates are done automatically regardless of where these updates happen. This feature provides out of the box improvement on performance and rendering time. However, if you have a component state that you do not want to be batched, you can opt out of it using the flushSync method. Below is a sample snippet on how it can be done;

import { flushSync } from 'react-dom';
function handleClick() {

 flushSync(() => {
 setCount(count => count + 1);
]});

 flushSync(() => {
 setStore(store => !store);
});
}

Transition API

In React, updates made in the UI can be categorized as urgent and transition updates also called the non-urgent. An example of an urgent update can be a case of inputting a text in a field while that of a transition update could be a search filtering functionality.

Now, if such updates occur simultaneously this could be termed a heavy operation and could lead to the freezing of your application. To solve this problem, this is where the transition API called the startTransition comes to play. This new feature tells React what updates should be marked as "transitions" in turn improving user interactions. Here is a code sample of how it works;

import { startTransition } from "react";

startTransition(() => {
  setSearch(input);
});

Suspense

When an application is rendered on the server, a static HTML file is returned to the browser allowing the user to see how the app looks while the JavaScript loads. When the file is loaded, the HTML becomes dynamic with what is known as hydration. The shortfall here is, that if all these are not in place, your application would not become interactive.

To solve this problem, React 18 provides two new server side rendering (SSR) features using the Suspense component;

• Streaming HTML allows pieces of a component to be sent as they get rendered.
• Selective hydration prioritizes the interactivity of components selected by a user.

New Hooks

One big turning point for React was the introduction of hooks in React version 16 which allows function components to access states and other React features without writing classes. The React 18 ships with five new hooks to better the developers' experience;

• useId: This hook allows us to create a unique identifier (ID) in our application both on the server and client.

• useTransition: It is used alongside startTransition to create a new state update that can be termed non-urgent.

• useDefferedValue: It allows deferring updates that are less urgent.

• useSyncExternalStore: This hook is useful when implementing subscriptions to external data sources.

• useInsertionEffect: This hook is limited to CSS-in-JS library authors for injecting styles into the DOM.

How to Update to React 18

To perform an update, the npm or yarn package manager can be used by running the following command in the terminal.

npm install react react-dom

or

yarn add react react-dom  

Then, you'll need to make a change to the index.js file in the root directory of the project's folder from the legacy API to the new root API as shown earlier.

How to Set up a New React 18 Project

To set up a new React 18 project, the create-react-app package is installed with npm or yarn in the terminal;

npx create-react-app my-react-app

or

yarn add create-react-app my-react-app

Conclusion

Now you know about some new features in React 18 like the new root API, Suspense, Transition or Automatic batching, and how to upgrade to this new version, and set it up from scratch. It is interesting to know that these features aim to improve the performance of applications built with React.

The recent changes in React have brought up new options previously impossible to have in a JavaScript framework which is quite impactful and valuable.

Comments

[Andrew Baisden]

So many great new features i'm trying to use as many as possible.