React 18 New Features

React 18 was released in March 2022. The new release focuses on updating the rendering engine and performance improvements. 

Here are a few major changes we are going to talk about today:

  • Concurrent React
  • Transitions
  • Automatic Batching
  • Suspense on the server
  • useId
  • useTransition
  • Deprecated: ReactDOM.render

Concurrent React

Before React 18, rendering was uninterrupted, synchronous translation and once rendering had started it couldn’t be interrupted.

Concurrency allows, in React 18, to interrupt rendering. We can now: pause, resume or abandon rendering. 


Transitions can be used to mark UI updates that are not needing urgent resources for updating.

It optimises rendering and gets rid of stale rendering.

By marking non-urgent UI updates as "transitions", React will know which updates to prioritise. This can be achieved by using startTransition. 

Automatic Batching

In the previous release batching updates were happening only inside React event handlers. 

React 18 introduces automatic batching which allows all state updates, even within promises, setTimeouts, and event callbacks to be batched.

Suspense on the server

React 18 now introduces that one slow component doesn’t have to slow the render of your entire app. With Suspense, you can tell React to send HTML for other components first along with the HTML for the placeholder, like a loading spinner. Then when the slow component is ready and has fetched its data, the server renderer will pop in its HTML in the same stream.

This means that the user can view the skeleton of the page as soon as possible, and the rest of the page re-renders as soon as it arrives.

useId hook

The previous hook was called useOpaqueIdentifier hook. That hook had many limitations and bugs.

In the React 18 that hook was improved and renamed to useId hook and it is used to generate an ID for both the client and the server side.

useTransition hook

useTransition is a hook for transition. It returns the transition state and a function to start the transition.

React state updates are classified:

  • Urgent updates - They reflect direct interaction, such as typing, clicking, pressing, dragging, etc.
  • Transition updates - They transition the UI from one view to another.


ReactDOM.render is now deprecated. Now you index.js file will look like this:

"import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

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


You may also like

November 20, 2023

Top IT Skills in Demand in 2024

In the ever-racing tech arena, staying in the loop isn’t a choice—it’s a must. Whether you’re a seasoned software developer aiming to maintain your edge, a practitioner honing your skills, or a job hunter gearing up for crucial interviews, you’ve got to ride the trend wave.  Join us on a journey into the most sought-after […]

November 13, 2023

How Does Lilly021 Fuel Startup Success?

In today’s fast-moving business landscape, startups are pushing the boundaries of innovation and boosting our economies. However, they often wrestle with various hurdles, from limited resources to fierce competition. That’s where having the proper guidance and expertise becomes essential.  Here at Lilly021, we take pride in being that reliable partner for startups, providing the support […]

November 6, 2023

Maximizing Your IT Internship: The Role of Mentor

When it comes to software engineering, making the leap from the classroom to the real-world industry can be a thrilling yet daunting adventure. Recent graduates navigate uncharted territory, facing complex tech challenges. They often find that practice deviates from their perception of how a task is approached and performed in the workplace. But here at […]