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

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

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(
  <React.StrictMode>
    <App />
  </React.StrictMode>
); 

reportWebVitals();"