DEV Community

Cover image for How to upgrade to React 18
Adarsh Goyal
Adarsh Goyal

Posted on • Edited on

How to upgrade to React 18

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);
Enter fullscreen mode Exit fullscreen mode

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 />);
Enter fullscreen mode Exit fullscreen mode

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

Sources:

  1. https://reactjs.org/blog/2022/03/29/react-v18.html
  2. https://www-freecodecamp-org.cdn.ampproject.org/c/s/www.freecodecamp.org/news/react-18-new-features/amp/

Top comments (2)

Collapse
 
wkylin profile image
wkylin.w

import ReactDOM from 'react-dom-client';

Collapse
 
adarshgoyal profile image
Adarsh Goyal

oh I missed that one thanks, Edited