illustration for Migrate a Client-Side Application to React 18 Beta
Course

Migrate a Client-Side Application to React 18 Beta

  6. 6
    Conditionally Render with Legacy Root API or New Root API
    55s

Conditionally Render with Legacy Root API or New Root API

Michael Chan
InstructorMichael Chan
Share this video with your friends

Social Share Links

Send Tweet

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.

View code on GitHub

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.