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


For the better portion of a decade, React has shipped with the `render` root API. This changes with React 18 — mostly. React 18 is a transitional release, supporting `render` (legacy root API) and `createRoot` (new root API). React 18's legacy root API operates exactly the same as v17.

https://app.egghead.io/api/v1/lessons/react-replace-legacy-root-api-with-new-root-api/subtitles

Instructor: [0:01] ReactDOM 18 ships with two root APIs -- the one that we're familiar with, ReactDOM.render, and also a new one, ReactDOM.createRoot. As of React 18, these are referred to the legacy root API and the new root API.

[0:19] When we use the legacy root API, we get a warning saying that everything that we render will be rendered as if it is in React 17. Nothing has changed. If we want to utilize the performance improvements of React 18, as well as the new concurrent features, we need to use createRoot, the new root API. How do we do that?

[0:41] Things change just a little bit. We're still going to keep this render() method, but we're only going to render the component tree. This gets put into createRoot. Format, Save, and Refresh in our browser. Now that we're using the new root API in React and ReactDOM 18, that warning goes away. With this one change, we've been able to update our app to opt into all of the new performance enhancements in React and ReactDOM 18.

Replace Legacy Root API with New Root API

Share this video with your friends

Course

Migrate a Client-Side Application to React 18 Beta