How Airbnb Smoothly Upgrades React

Andre Wiggins

Incrementally modernizing our frontend infrastructure to roll out the latest React features without downgrades

Airbnb

•

Andre Wiggins

•11 min read•intermediate•

--

•View Original

BabelJSXKubernetesReactTypeScriptWebpack

Overview

Airbnb successfully upgraded its web surfaces from React 16 to React 18 using a systematic approach called the React Upgrade System. This infrastructure allows for incremental upgrades, testing, and measuring performance impacts, ultimately enhancing the upgrade process for their extensive monorepo.

What You'll Learn

1

How to implement incremental upgrades in a monorepo environment

2

Why module aliasing is essential for managing multiple versions of a library

3

How to set up environment targeting for different build artifacts

4

When to use performance testing during library upgrades

Prerequisites & Requirements

Understanding of React and its versioning
Familiarity with module aliasing and environment targeting techniques(optional)

Key Questions Answered

What are the main challenges of upgrading React in a large project?

Upgrading dependencies in a large project like Airbnb's monorepo is challenging due to the reliance on specific APIs and behaviors. The need for atomic updates can lead to extensive migration work and potential errors, making the process risky and requiring significant engineering effort.

How does Airbnb ensure safe and incremental upgrades of React?

Airbnb developed the React Upgrade System, which allows for incremental upgrades by using module aliasing and environment targeting. This system enables them to test and roll out upgrades progressively, reducing risks associated with large, atomic updates.

What is module aliasing and how is it used in the upgrade process?

Module aliasing allows Airbnb to manage multiple versions of React by creating separate package dependencies. This enables the application to import the appropriate version of React without increasing the bundle size or causing compatibility issues.

What testing strategies did Airbnb employ during the React upgrade?

Airbnb utilized a comprehensive test suite that included visual regression testing, integration testing, and unit testing. They ran unit tests under both React 16 and 18, allowing for gradual fixes and ensuring stability before full rollout.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend

React

Used for building user interfaces and managing application state.

Infrastructure

Kubernetes

Used for deploying and managing different environments for React 16 and 18.

Key Actionable Insights

1
Implement a React Upgrade System to facilitate incremental upgrades in your projects.
This approach minimizes risks associated with large updates and allows for continuous integration of new features, improving overall project stability.

2
Utilize module aliasing to manage multiple library versions effectively.
This technique prevents bundle size inflation and ensures compatibility across different environments, making it easier to transition between library versions.

3
Incorporate performance testing as a standard part of your upgrade process.
By measuring performance impacts before and after upgrades, you can make informed decisions that enhance user experience and application efficiency.

Common Pitfalls

1

Failing to properly manage dependencies can lead to increased bundle sizes and compatibility issues.

This often occurs when multiple versions of a library are bundled together without proper aliasing, resulting in a bloated application and potential runtime errors.

Related Concepts

Incremental Upgrades

Module Aliasing

Performance Testing

Environment Targeting