React 18: Everything you need to know

After the release of React 17 (famously known as the no-feature release), we finally have the stable version of React 18, which went live on 29th March 2022. Wondering what changed in the new version? This article got you covered!

Initialization Changes

If your app is using an old version of React, you can update it to the latest version using

npm install react@18.0.0 react-dom@18.0.0

OR

yarn add react@18.0.0 react-dom@18.0.0

There are no breaking changes in React 18, but the setup has been modified to utilize the new features. In the index file, there is a new syntax to plug in the React App.

// OLD METHOD:
import ReactDOM from "react-dom";
// ...
ReactDOM.render(<App />, document.getElementById("root"));
// NEW METHOD:
import ReactDOM from "react-dom/client";
// ...
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

With that small tweak, you are good to go! You can now use the plethora of new features React 18 has to offer.

Concurrent Mode

If the entire React 18 update has to be summed up in one word, it would be Concurrency.