How to upgrade to React 18

#javascript #typescript #webdev #react

With new react version things like concurrent rendering, automatic batching, transitions and suspense on the server are introduced you can use this only after upgrading to react 18. so less go!

Install React 18 and React DOM from npm or yarn, like this:

npm install react react-dom

Then, you'll want to use createRoot instead of render.

In your index.js, update ReactDOM.render to ReactDOM.createRoot to create a root, and render your app using root

Here's what it would look like in React 17:

import { render } from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

render(<App />, container);

And here's what it looks like in React 18:

import { createRoot } from 'react-dom/client';
import App from 'App';
const container = document.getElementById('app');

// create a root
const root = createRoot(container);

//render app to root
root.render(<App />);

And you are now upgraded to React 18! enjoy!
Complete update guide is available here

Sources: