Photo by Christin Hume on Unsplash

What is New in React 18

React 18, released in March 2022, brought with it a suite of new features and updates that significantly enhance the capabilities and performance of React applications. This release lays the groundwork for concurrent rendering, which is a foundation for future React updates. Here’s an in-depth look at the key features and changes in React 18, complete with technical details and code examples.

Upgrading to React 18

To begin using React 18, install the latest versions of react and react-dom using npm or yarn:

npm install react react-dom

Transition from ReactDOM.render to ReactDOM.createRoot as shown below:

React 17:

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

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

React 18:

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

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

Concurrent Rendering

Concurrent rendering is a major feature in React 18. It allows React to work on multiple rendering tasks simultaneously. For instance, while waiting for data to load, React can…