Gradual Adoption Strategy of React 18

Update React Dependencies with the @next Version Tag

Replace Legacy Root API with New Root API

Use React 18's New Root API Alongside the Legacy Root API

Replace Legacy Root API's Callback Argument

Conditionally Render with Legacy Root API or New Root API

Opt-in to Automatic Batching with createRoot

Remove unstable_batchedUpdates Calls

Opt-out of Automatic Batching with ReactDOM.flushSync

Handle Class Component setState edge-case with ReactDOM.flushSync

Stay up-to-date on React 18 progress with the React Working Group

Migrate a Client-Side Application to React 18 Beta

In this lesson we'll explore React versioning, release channels, and npm tags. 

Then install the latest react and react-dom 18 prerelease versions using the @next  version tag.

https://app.egghead.io/api/v1/lessons/react-update-react-dependencies-with-the-next-version-tag/subtitles

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.

Update React Dependencies with the @next Version Tag

Share this video with your friends

Course

Migrate a Client-Side Application to React 18 Beta