React 18 Features And Updates

React 18 was out on March 2022 with some great new features and a focus on performance improvements.

In this tutorial, we will discuss about react 18 features and updates, we will also discuss few important concepts like concurrent rendering, automatic batching, transition, and suspense on the server.

Related read: Migrating to the Latest React Version

React 18 New Features

Let’s deep dive into React 18 new features and learn more about it.

This is for you if your project is still in React 17 and wants to upgrade to React 18. So you need to follow some steps for it, and they mention below.

Install React18 and ReactDOM by using npm or yarn like

npm install react react-dom

else,

yarn add react react-dom

After successfully installing it, you must change the code in the index.js file. Without these changes, the application will throw some warnings because React 18 changed ReactDOM.

What’s It Look Like In React 17 ?

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

And How It’s Look Like In React 18

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

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

It is enough for running our application on React 18. Now moving forward to react 18 new features and looking at them individually. 

Here is a list of a few updates.

1. Concurrency in React 18
2. Automatic Batching
3. Transitions
4. Suspense on Server
5. Strict Mode

1. Concurrency In React 18

This new update is very important for the performance of our application. Concurrent rendering means rendering those things first, which is more important than others.

Let’s take an example for better understanding.

Suppose we need to talk with two people – person 1 and person 2. Before React 18, in a non-concurrent setting, we can have only one call at a time, and after the first call, we can have another call.

Like if we are talking with a person 1, after cutting this call, we can call Person 2. This is fine when calls are sorted but think about if calls are long. This can be a time sink.

In a contemporary setting, we could call Person 1, and once we were put on hold, we could call Person 2.

It does not mean that we are talking simultaneously, but it just means that we have more than one call simultaneously and can decide which ring is more important.

Similarly, React 18 came up with concurrent rendering; it can interrupt, pause, resume, or abandon rendering. This allows us to react to render those things first, which has more priority and respond to the user interaction quickly, even if it is on a heavily loaded task.

Before This update, React 17 was rendering single, uninterrupted, and synchronized, and once rendering started, it could not be interrupted.

2. Automatic Batching

Automatic batching is one of the best features that contributes more to making applications faster. Let’s go through an example and understand what automatic batching is.

Suppose you want to make a pizza. So you plan to go to the market and buy all ingredients which you need for pizza. So you make the trip, buy all the ingredients at once, and come back with all the elements.

This is batching. Without batching, you would start cooking pizza and find out what ingredients you need at a time. Like it would be best if you had salt, so go to the market, purchase it, come back and again start cooking. Then again, it would help if you had some other ingredient. So again, go to the market, buy it, come back, start cooking, and drive yourself crazy.

In React 18, the automatic batching reducer re-rending and make the application faster.

Let’s see the code

import React,{useState} from 'react'
 const App=()=>{
 
 const [name,setName]=useState("");
 const [email,setEmail]=useState("");
 const [phone,setPhone]=useState(0);
 
 const updateData=()=>{
 setName("person");
 setEmail("react@gamil.com");
 setPhone(111111111);
 }
 
 console.warn("update state")
 
 return(
 <div>
 <h1>React 18</h1>
 <button onClick={updateData}>Update all data</button> 
 </div>
 )
 }

If we run this code, we can see only a one-time “update state” in the console, which is the beauty of automatic batching. For example, suppose we have 10 state updates in the update data function, and when the user clicks on the update button, it will re-render only once and update all the states.

That is how Automatic batching works.

If we want to re-render our application after the updation of the state, ReactDOM gives us the callback function flushSync. Let’s see the code.

const updateData=()=>{ 
 flushSync(()=>{
       setName("person");
 }) 
 flushSync(()=>{
 setEmail("react@gmail.com");
 })
 
 flushSync(()=>{
 setPhone(111111111);
 })
 }

Now it will re-render the code after each update of state.

3. Transitions

This feature is used when one state depends on another. For example, when we search something like open your browser and write “test” into the searchBar, what happens there is the first set state of test which we wrote into the searchBar.

We see the result related to what we wrote into the searchBar, so basically, update the first state and then find the development related to the first state, store it in the second state, and show it below the search bar. 

Here, the user typing in the search bar is more important than showing the result. Searching is not urgent and so can be non-urgent.

startTransition is a callback function, and We can mark our task as non-urgent by using startTransition.

Import { startTransition } from 'react';

// Urgent : Show what was typed
setInputValue(input)

// Mark any non-urgent state updates inside as transitions
startTransition(()=>{
 setSearchResult(input)
})

4. Suspense On Server

Suspense is a very interesting feature that has been improved in react 18. Let’s see via one example.

To make our application interactive, JavaScript plays a big role. For example, suppose you have a poor connection, or your JavaScript bundle is huge. In this case, the process can take a long time, or the user must wait for the page to become interactive or see meaningful content.

One component has a huge JavaScript bundle, so our application became slower by only this component. One slow feature can slow down our entire page.

Now React 18 adds support for the suspense on the server. With the help of the suspense will load out our other component, which is faster and shows a loading or placeholder for the slower component that will not get the real data.

This technique is very easy to use. Just wrap your the slow part of your application. See the below code.

<Suspense fallback={<Spinner />}>
  <ProfilePage />
</Suspense>

5. Strict Mode

Strict Mode is a tool for highlighting some problems in an application. For example, if we forget to add a key to a list or something else, Strict Mode warns about it in the console. Furthermore, it activates additional checks and warnings for its descendants.

Strict mode checks in only development mode. It does not impact the production build.

To enable strict mode for the application, see the below code. Then, open index.js and wrap the App component with React.StrictMode.

root.render(
 <React.StrictMode>
 <App />
 </React.StrictMode>
);

6. Dropping Support For Internet Explorer

React abandoned support for Internet Explorer in this release due to modifications and the introduction of React 18 new features. The latest update is built on modern browser features such as microtasks which cannot be adequately polyfiled in IE.

Related Read : React Native Form Validation Using Formik And Yup