CI/CD Pipelines

React uses GitHub Actions to automate testing, linting, and release workflows. These pipelines ensure that every commit to the repository maintains the stability of the React runtime and the correctness of the React Compiler.

Core Workflows

The repository consists of several primary CI pipelines that run on every pull request and push to the main branch.

Runtime Build and Test

The Runtime Build and Test workflow is the primary gatekeeper for the React library. It handles:

• Cross-platform testing: Running unit and integration tests across multiple environment configurations.
• Build Validation: Ensuring that core packages like react, react-dom, and the scheduler build correctly.
• Regression Testing: Running the full React test suite to prevent breaking changes in the reconciliation engine or event system.

Compiler Validation

The Compiler TypeScript workflow focuses specifically on the babel-plugin-react-compiler. This pipeline performs:

• Type Checking: Validating the TypeScript implementation of the compiler's Intermediate Representation (HIR) and transformation passes.
• Fixture Testing: Running a large suite of "fixtures" (located in compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures) that compare input source code against expected compiler output or execution results.

Static Analysis and Linting

React's CI/CD infrastructure includes specialized validation passes that enforce React-specific architectural constraints. These are integrated into the build and test pipelines to catch errors before they reach production.

Capitalized Call Validation

The compiler includes a validation pass (ValidateNoCapitalizedCalls) that prevents developers from calling capitalized functions directly, as these are reserved for React Components and should be invoked via JSX.

The pipeline checks for these patterns:

// CI will flag this as an error
function Component() {
  const x = SomeFunc(); // Error: Capitalized functions are reserved for components
  return x;
}

// Correct usage validated by CI
function Component() {
  return <SomeFunc />;
}

Memoization and Escape Analysis

For the React Compiler, the CI pipelines run sophisticated analysis to ensure that memoization is applied safely. The PruneNonEscapingScopes pass automatically identifies which values truly "escape" a component (e.g., being returned or passed to a hook) and prunes unnecessary memoization to keep the output code performant and lean.

Using CI Flags in Development

When contributing to the compiler or core runtime, you can influence the CI behavior and local test execution using specific directives in your test files:

• @compilationMode("infer"): Tells the pipeline to infer which functions should be compiled.
• @validatePreserveExistingMemoizationGuarantees: Forces the CI to verify that the compiler does not break manual memoization (like useMemo or useCallback) already present in the source.
• @validateNoCapitalizedCalls: Enables strict checks for component invocation patterns.

Pre-releases and Snapshots

Every successful run of the main CI pipeline generates build artifacts. While official releases are published to npm periodically, the CI/CD system supports:

1. Experimental Builds: Snapshots of the current main branch used for internal testing at Meta and by early adopters.
2. Compiler Pre-releases: The babel-plugin-react-compiler is versioned and published based on the successful completion of the compiler-specific workflows, ensuring that only passes that satisfy all fixture tests are released.

To view the status of these pipelines or debug a failed check on a pull request, refer to the Actions tab in the GitHub repository.