How Airbnb Smoothly Upgrades React

🌈 Abstract

The article discusses Airbnb's recent upgrade of its frontend from React 16 to React 18, the current major version of React. It describes the challenges and solutions involved in this upgrade, including:

• Creating the React Upgrade System to enable progressive rollout and testing of the upgrade across Airbnb's web monorepo
• Using module aliasing and environment targeting to handle the two different React versions
• Leveraging Airbnb's comprehensive test suite to ensure the safety of the upgrade
• Controlling the rollout of the upgrade across different product surfaces

The article also shares lessons learned and plans for future upgrades using the React Upgrade System.

🙋 Q&A

[01] Upgrading Dependencies

1. What are the key goals that Airbnb aimed to achieve with the React Upgrade System?

• Be able to upgrade incrementally rather than in a single, large migration
• Test the upgrades and get feedback from production before full rollout
• Upgrade more frequently and make the process less "heroic"

2. What were the main challenges Airbnb faced with their previous approach to upgrading dependencies?

• Performing atomic updates required a lot of upfront migration work and a long-running upgrade branch
• It was difficult to catch performance regressions before the full rollout
• Going straight from 0% to 100% rollout on deployment was risky

3. How did Airbnb's module aliasing and environment targeting solutions address the challenges of handling two different React versions?

• Module aliasing allowed them to add another "react-18" dependency and redirect imports from "react" to the appropriate version
• Environment targeting enabled them to produce separate build artifacts for React 16 and React 18, and run them in different Kubernetes environments

4. How did Airbnb leverage their comprehensive test suite to ensure the safety of the React 18 upgrade?

• They fixed all new failures in their visual regression, integration, and unit tests before launching the upgrade to users
• For unit tests, they ran them under both React 16 and 18, allowing existing failures in the React 18 test suite and progressively fixing them

[02] Rollout and Adoption

1. How did Airbnb manage the rollout of the React 18 upgrade across different product surfaces?

• They rolled out the upgrade at the app level, as managing multiple React versions within a single-page app would lead to poor performance
• Using the React Upgrade System, they were able to turn the upgrade on and off for each app, allowing developers to test it in both development and staging environments

2. What was Airbnb's approach to adopting new React 18 features after the initial upgrade?

• They intentionally held off on adopting new features like the new root APIs and concurrent rendering for a few weeks, to ensure the upgrade had settled before introducing more changes
• This allowed them to be confident they wouldn't need to downgrade and revert code changes

3. How does Airbnb plan to use the React Upgrade System for future upgrades?

• They will use the system to test the canary channel of React, getting a preview of migration work needed for the next major version (React 19)
• The goal is to make upgrading a continual, incremental effort rather than a large, one-off change