@doist/react-compiler-tracker

React Compiler Tracker

While it's safe to opt out of using memoization hooks such as useCallback and useMemo in code optimized by the React Compiler, it is easy to introduce violations that cause the compiler to bail out, leading to performance issues when values are not memoized.

Designed to run as a part of Git hooks and CI, this tool helps prevent this and progressively adopt the React Compiler by tracking and warning against newly introduced compilation errors. It maintains a .react-compiler-tracker.json record file to track known compiler errors per file.

Prerequisites

This tool requires babel-plugin-react-compiler to be installed in your project:

npm install --save-dev babel-plugin-react-compiler

Installation

npm install --save-dev @doist/react-compiler-tracker

Usage

--overwrite

Regenerates the entire .react-compiler-tracker.json by scanning all supported source files (src/**/*.{js,jsx,ts,tsx}). Useful for initialization or picking up changes from skipped Git hooks.

npx @doist/react-compiler-tracker --overwrite

--stage-record-file

Checks Git staged files and updates the records. Exits with code 1 if errors increase (preventing the commit), otherwise updates .react-compiler-tracker.json for staged files.

npx @doist/react-compiler-tracker --stage-record-file

--check-files <file1> <file2> ...

Checks specific files without updating records. Exits with code 1 if checked files show increased error counts (or new errors). Primarily for CI to ensure PRs don't introduce new compiler errors.

npx @doist/react-compiler-tracker --check-files src/components/Button.tsx src/hooks/useData.ts

No flags

Checks all supported source files and reports the total error count. The records file is not updated in this mode.

npx @doist/react-compiler-tracker

Integration Examples

lint-staged

In package.json:

{
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": "npx @doist/react-compiler-tracker --stage-record-file"
  }
}

GitHub Actions CI

- name: Check React Compiler violations
  run: |
    # Get changed files in the PR
    FILES=$(git diff --name-only origin/main...HEAD -- '*.tsx' '*.ts' '*.jsx' '*.js' | tr '\n' ' ')
    if [ -n "$FILES" ]; then
      npx @doist/react-compiler-tracker --check-files $FILES
    fi

License

Released under the MIT License.