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

React 18 supports the legacy root API (`render`) and a new root API (`createRoot`). Utilize this to conditionally render based on environment, user preference, or audience sample.

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

Instructor: [0:00] When migrating to React 18, you may want to conditionally use the legacy API or the new Root API, depending on an environment variable or a feature flag. Let's do this in a very simplified way.

[0:14] Let's create a new constant for React 18 and set it to true. If we're in a React 18 environment, we want to use the new createRoot API. Else, we'll use the legacy root API. Let's copy this, paste it up here, and do our transformation. Take out that argument, insert createRoot, and we're good to go.

[0:40] Now, based on environment or feature flag, we can conditionally render using the legacy root API or the new Root API. To test it out, change it to false and see our warning again.

Conditionally Render with Legacy Root API or New Root API

Share this video with your friends

Course

Migrate a Client-Side Application to React 18 Beta