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…