C
ChaoBro

React Doctor: Your Agent Writes Bad React Code, It Catches It — One Command Health Score, Supports Next.js and React Native

React Doctor: Your Agent Writes Bad React Code, It Catches It — One Command Health Score, Supports Next.js and React Native

More people are using AI agents to write React. Agents are fast, but quality is hit-or-miss — unnecessary useEffect, leaked subscriptions, over-rendering, state where it doesn't belong.

React Doctor diagnoses these issues. From the million team (the React virtual DOM optimization project). 2,643 stars this week on GitHub Trending.

Usage

npx react-doctor@latest

One command. Scans the codebase. Outputs a 0-100 health score:

  • 75+: Great
  • 50-74: Needs work
  • < 50: Critical

Covers five dimensions: state & effects, performance, architecture, security, accessibility. Rules auto-adjust based on your framework (Next.js / Vite / React Native) and React version.

The Killer Feature: Train Your Agent

npx react-doctor@latest install

Auto-detects installed agents (Claude Code, Cursor, Codex, OpenCode… 50+) and injects React best practices as SKILL.md files. Your agent follows these rules next time it writes code.

Fix the root cause, not the symptoms.

GitHub Actions

Drop it in CI for automatic PR checks with health scores posted as comments. Configurable fail-on threshold to block merges below a score.

My Take

React Doctor addresses a growing problem: as AI coding tools become ubiquitous, more React code is agent-generated. Agents can write code that runs, but not necessarily code that's good. React Doctor is a quality gate for agent-generated code.

Health score is a reference metric, not a replacement for code review. But for quickly identifying problem areas and setting up CI quality thresholds, it's adequate.

Main sources: