React 18 - Update Guide & What's New?

React 18 was released and whilst it should only require one code change to update to this new version, it still introduces some exiting new concepts and lays a solid foundation for React's future.

Updating from React 17 to 18 only requires two simple steps:

1. Install the latest version:

npm install react@18 react-dom@18

1. Go to your root entry file (typically index.js) and change the react-dom import from

import ReactDOM from 'react-dom';

to

import ReactDOM from 'react-dom/client';

Also replace the ReactDOM.render() method in that same file.

// ... imports etc.
ReactDOM.render(<App />, document.getElementById('root'));

should be changed to:

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

And that's it! This is all you have to do, no other code must be changed. React 18 also does not change the way you write React code, you therefore don't have to re-learn everything.

React introduces one key new concept: Concurrency. I explain it in greater detail in my React 18 video and you can also learn more about all the new features and changes in the official release blog post.