Update React Dependencies with the @next Version Tag

Instructor: [0:00] To update our React dependencies, we first need to know a little bit about how versions work for the React package. Here, I have the npm page up for the React package, and we're going to go right to versions. Here, we'll see all of the current tags that we can choose from when installing React and, consequently, ReactDOM.

[0:21] In this table, we see the available tag and then the version that it relates to. We have Latest, Next, Alpha and Experimental. Latest is the one that you're probably most familiar with. This is what you'll get by default by typing npm install React or yarn add React. Next and Alpha are what we'll focus on today.

[0:43] Right now, those are both mapping to the Alpha version of React 18. I'm going to choose Next because I want it to be the next version that's going to, theoretically, be released. However, both of these will have the API that we expect to have in React 18. How do we utilize these?

[1:02] Over here, I have a Create React App set up. I'm going to stop the server and install our new dependencies. We use yarn add react@next and react-dom@next. Hit Enter and watch it do its magic. You'll see that, in the package.json file, these versions are now up to date with those that we saw on nextjs.com.

[1:29] All that's left is to restart our server and see what happens. Hit yarn start Enter and go back to our App tab. Let's hit Refresh, and we get a new error. This is perfect. This is exactly what we wanted to see to confirm that we're using React 18.

[1:46] It says "Warning -- ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17" with a link to learn more.

[2:01] The link conveniently takes us to a React Working Group article on how to migrate the legacyRoot API, which we're familiar with, to the new createRoot API. Conveniently, that's what this course is about too.