#6: Use new root API and legacy root API together, 2021

It’s always been difficult to use two versions of React in a single app. This makes upgrading difficult because it requires a full, up-front migration. And that can take months to get right.

React 18 prizes gradual adoption. So we can render different component trees with different rendering strategies.

We can use both new and legacy root APIs on the same page.

ReactDOM.createRoot(v18Root).render(<WorksWith18 />)
ReactDOM.render(<DoesntWorkWith18 />, v17Root)

We can also conditionally use a root API based on segmentation or environment:

if (condition) {
  ReactDOM.createRoot(rootNode).render(<App />)
} else {
  ReactDOM.render(<App />, rootNode)
}

With React 18, we don’t change our entire app at once. And — without much trouble — we can manage a staged rollout to users.

🐦 chantastic

P.S. How have you handled upgrades with previous versions? Hit reply or join the conversation in the Lunch Dev Discord Server.