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

September 11, 2023

Q4 Impact: Why the Final Stretch Matters

Just like in natural ones, cycles dictate progress in the business ecosystem. And software development is no exception. Throughout the year, spanning four quarters, dev teams negotiate the constant steps of strategizing, creating, coding, validating, and rolling out software. Each phase has its own goals and challenges as teams strive to create high-quality products tailored […]

August 28, 2023

Critical Thinking in Coding: Your Ladder to Software Mastery?

Is critical thinking a rare talent reserved for a chosen few? Or is it just a myth spread by those hesitant to venture into software development? If you ask us, such a viewpoint weakens the genuine core of critical thinking. Rather than viewing it as an unchangeable quality, consider it an evolving talent that may […]

August 21, 2023

Tech's Cultural Compass: Why Cultural Intelligence Counts

In the busy global IT arena, experts team up worldwide, each with a unique cultural imprint. This international union, however, has its challenges. Cultural differences in conventions and attitudes can sometimes operate as barriers to efficient communication.  Today’s blog post digs into the critical function of cultural intelligence in software development teams, emphasizing its significance […]