Add React Doctor to GitHub Actions

doctor

Bot

reviewed

2 days ago

components/FilterEditor.tsx

124

125

useEffect(() => {

fileNameApiFilterDraftRef.current = nextDraft

React Doctor

no-derived-state

(warning)

Fix -> work out the value while rendering instead of copying it into useState through a useEffect.

See docs

View live example on

cdc-open-viz

Run npx react-doctor@latest ci install from the project root, or use one of the guided options below. React Doctor reports issues introduced by each pull request.

Copy this agent prompt:

Set up React Doctor in this repository so it reviews every pull request in CI. React Doctor is a deterministic static analyzer for React and React Native codebases. Its official GitHub Action reports issues introduced by a pull request, posts one sticky summary comment, and adds inline review comments on changed lines. Set it up exactly as described below. Do not improvise the workflow. Complete all of these steps, end to end: 1. Create and check out a new branch off the repository's default branch (for example: feat/add-react-doctor). 2. Create the file .github/workflows/react-doctor.yml with EXACTLY these contents (do not reformat or add steps): ```yaml name: React Doctor on: pull_request: types: [opened, synchronize, reopened, ready_for_review] push: branches: [main] permissions: contents: read pull-requests: write issues: write statuses: write concurrency: group: react-doctor-${{ github.event.pull_request.number || github.ref }} cancel-in-progress: true jobs: react-doctor: runs-on: ubuntu-latest steps: - uses: actions/checkout@v5 with: fetch-depth: 0 - uses: millionco/react-doctor@v2 ``` 3. Commit only that new workflow file. Do not stage or commit anything else. 4. Open a pull request from your branch against the default branch, titled "Add React Doctor CI". 5. Wait for the "React Doctor" check to finish. The workflow-only change should be skipped because it changes no eligible React files, and the check should pass. If it reports issues, summarize them for me and stop. Do not change application code in this pull request. Follow these constraints exactly: - Reference the Action as millionco/react-doctor@v2. Never use @main, and do not add inputs that are not shown above. - Keep fetch-depth: 0 on the checkout step. The Action needs full git history to diff the pull request against its base branch and report only newly introduced issues. - Keep the entire permissions block. pull-requests: write and issues: write power the sticky and inline comments, statuses: write sets the commit status, and contents: read lets it read the diff. - Do not add an install step, a build step, a matrix, a cache, or a github-token input. The Action installs what it needs and uses the built-in GITHUB_TOKEN automatically. - Do not create, modify, rename, or delete any other workflow, script, config file, or dependency. This change is the single new file only. - If a .github/workflows/react-doctor.yml already exists, update it to match the contents above instead of creating a duplicate. When you are done, reply with the path of the file you created and the link to the open pull request. For configuration options, monorepo setup, pull request comments, blocking rules, and troubleshooting, use the official setup guide: https://www.react.doctor/docs/ci-and-prs/github-actions-setup

Agent prompt

Watch the CI run. It should pass because the workflow-only change has no eligible React files.

All checks have passed

1 successful check

React Doctor

–– 0 errors • 0 warnings

No conflicts with base branch

Merging can be performed automatically.

Create a new branch

git checkout -b feat/add-react-doctor

Create a file in

.github/workflows

called

react-doctor.yml

with these contents:

name: React Doctor

on:
  pull_request:
    types: [opened, synchronize, reopened, ready_for_review]
  push:
    branches: [main]

permissions:
  contents: read
  pull-requests: write
  issues: write
  statuses: write

concurrency:
  group: react-doctor-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true

jobs:
  react-doctor:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5
        with:
          fetch-depth: 0
      - uses: millionco/react-doctor@v2

.github/workflows/react-doctor.yml

Commit the change and create a PR against main

Watch the CI run. It should pass because the workflow-only change has no eligible React files.

All checks have passed

1 successful check

React Doctor

–– 0 errors • 0 warnings

No conflicts with base branch

Merging can be performed automatically.

Configuration

React Doctor starts in advisory mode and reports only issues introduced by the pull request. To map the entire project before you enforce a gate, run a full scan:

- uses: millionco/react-doctor@v2
  with:
    blocking: none
    scope: full

blocking: none reports issues without failing the check. scope: full scans the whole project. The other scopes are changed, files, and lines.

React Doctor starts in advisory mode. When the team trusts the signal, set blocking: error to fail on new errors or blocking: warning to fail on any new finding.

For more configuration options, see the Action reference.

Monorepos and subdirectories

Point the Action at an app in a subfolder with directory:

- uses: millionco/react-doctor@v2
  with:
    directory: apps/web

By default, project: "*" finds and scans every React project. To scan only some projects, list them:

- uses: millionco/react-doctor@v2
  with:
    project: "web,admin"

What happens on a pull request

On a pull request, React Doctor reports findings in three places: the PR conversation, inline review comments, and the CI logs.

When it finds a new issue on a changed line, it leaves an inline review comment and updates the same summary comment. If the configured blocking level includes that issue, the check fails for branch protection.

Pushes to main only record the score, with no comment and no failure, so main never goes red over old issues.

Pull request feedback

The Action creates or updates one sticky summary comment instead of stacking new ones. It shows issue counts, the score, links each error to its file:line, groups warnings by file, and notes what your change added or fixed.

Inline review comments appear on the changed lines that triggered a diagnostic. Each includes a suggested fix and a link to the relevant docs, and React Doctor caps them so the summary stays the complete record.

Every run also includes the full terminal output in the CI logs, so reviewers can fall back to them when PR comments are disabled or unavailable.

Feedback controls

Use Action inputs to control where feedback appears:

- uses: millionco/react-doctor@v2
  with:
    comment: false
    review-comments: false
    commit-status: false

comment needs issues: write, review-comments needs pull-requests: write, and commit-status needs statuses: write. To control what reaches the pull request comment, use surfaces.prComment in your React Doctor config.

Use another CI provider

The scanner is a plain CLI, so it also runs on GitLab CI, CircleCI, Jenkins, and Buildkite. See Other CI providers.

Troubleshooting

It reported existing issues on a pull request. The checkout couldn't find where your pull request started. Add fetch-depth: 0 to the actions/checkout step.

No comment showed up. Check the workflow has pull-requests: write and issues: write, and that comment isn't false. Comments never appear on push runs, only pull requests.

The status or score isn't showing. That needs statuses: write (unless you set commit-status: false). The Action warns in the run log when the permission is missing.

It's failing PRs before the team is ready. Set blocking: none to report findings without failing the workflow, then tighten later.

A failing check doesn't block the merge. Add the React Doctor check as required under Settings → Branches → Branch protection rules. Without that, a red check shows but the merge button still works.

PRs from forks don't get comments. GitHub blocks write access on fork pull requests for security. The scan still runs and still passes or fails, but it can't post a comment.