惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
Docker
U
Unit 42
Google DeepMind News
Google DeepMind News
B
Blog RSS Feed
S
SegmentFault 最新的问题
阮一峰的网络日志
阮一峰的网络日志
雷峰网
雷峰网
Microsoft Security Blog
Microsoft Security Blog
爱范儿
爱范儿
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园_首页
Apple Machine Learning Research
Apple Machine Learning Research
罗磊的独立博客
GbyAI
GbyAI
Stack Overflow Blog
Stack Overflow Blog
Martin Fowler
Martin Fowler
宝玉的分享
宝玉的分享
L
LangChain Blog
Engineering at Meta
Engineering at Meta
量子位
有赞技术团队
有赞技术团队
博客园 - 【当耐特】
A
About on SuperTechFans
Y
Y Combinator Blog

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
React Doctor: Is This the Missing Health Check for Your R...
ArshTechPro · 2026-05-12 · via DEV Community

If you have ever inherited a messy React codebase, or simply wondered whether your own project has drifted into bad patterns over time, React Doctor is a tool worth knowing about. One command, a score between 0 and 100, and a list of problems to fix. That is the pitch. Let us dig into whether it lives up to it.


What Is React Doctor?

React Doctor is an open-source CLI tool from the team behind Million.js. It scans your React project and produces a health score alongside a structured list of issues. Think of it as a linter on steroids — one that understands React patterns specifically, rather than just generic JavaScript rules.

npx -y react-doctor@latest .

Enter fullscreen mode Exit fullscreen mode

That is all it takes to run it. No installation, no config file required to get started.


How It Works Under the Hood

When you run React Doctor against your project, it does two things in parallel.

1. Lint pass

It checks 60+ rules organized into categories: state and effects, performance, architecture, bundle size, security, correctness, accessibility, and framework-specific concerns (Next.js, React Native). Importantly, it detects your framework, React version, and compiler setup automatically, and toggles rules accordingly. So if you are on Next.js, it will apply Next.js-specific rules without you having to configure anything.

2. Dead code detection

It runs a separate pass to find unused files, unused exports, unused types, and duplicates across your codebase.

After both passes, it filters the results through any config you have set, then computes a score weighted by severity:

  • 75 and above: Great
  • 50 to 74: Needs work
  • Below 50: Critical

Errors weigh more than warnings, so a single serious issue pulls the score down more than a pile of minor ones.


Getting Verbose Output

By default you get a summary. Add --verbose and you see the exact files and line numbers involved:

npx -y react-doctor@latest . --verbose

Enter fullscreen mode Exit fullscreen mode

This is the mode you actually want when fixing things, since the summary alone does not tell you where to look.


Real-World Scores on Popular Projects

The repo includes a leaderboard of scans against well-known open-source React projects. Here is a snapshot:

Project Score
tldraw 84
excalidraw 84
twenty 78
plane 78
formbricks 75
posthog 72
supabase 69
payload 68
sentry 64
cal.com 63
dub 62

Even tldraw and excalidraw — projects maintained by experienced teams — score in the mid-80s, not 100. This is a useful calibration. Do not expect to hit a perfect score; the goal is identifying what actually matters in your specific project.


Plugging It Into CI With GitHub Actions

React Doctor ships a GitHub Action you can drop into any workflow:

- uses: actions/checkout@v5
  with:
    fetch-depth: 0
- uses: millionco/react-doctor@main
  with:
    diff: main
    github-token: ${{ secrets.GITHUB_TOKEN }}

Enter fullscreen mode Exit fullscreen mode

The diff option is particularly useful — it tells the action to only scan files that changed relative to your base branch. This means in a pull request, it only flags new problems introduced by that PR, not pre-existing issues across the whole repo. The action also posts findings as a PR comment when github-token is set.

The action outputs a score value you can use in subsequent steps — for example, failing the build if a PR drops the score below a threshold you define.


Config File

You can suppress specific rules or exclude files via a react-doctor.config.json at the project root:

{
  "ignore": {
    "rules": ["react/no-danger", "jsx-a11y/no-autofocus"],
    "files": ["src/generated/**"]
  }
}

Enter fullscreen mode Exit fullscreen mode

Or, if you prefer not to add another config file, you can put the same config under a "reactDoctor" key in your package.json.


Using It Programmatically

If you want to integrate React Doctor into a custom script or tooling pipeline, there is a Node.js API:

import { diagnose } from "react-doctor/api";

const result = await diagnose("./path/to/your/react-project");

console.log(result.score);       // { score: 82, label: "Good" }
console.log(result.diagnostics); // Array of Diagnostic objects
console.log(result.project);     // Framework, React version, compiler info

Enter fullscreen mode Exit fullscreen mode

Each diagnostic object tells you the file, plugin, rule, severity, message, help text, line, and column. Clean enough to build your own reporting on top of.


Teaching Your AI Coding Agent React Best Practices

One underrated feature: React Doctor can install a "skill" into your coding agent — Cursor, Claude Code, Windsurf, Copilot, and others are supported:

curl -fsSL https://react.doctor/install-skill.sh | bash

Enter fullscreen mode Exit fullscreen mode

This teaches the agent 47+ React best practice rules so it can catch issues proactively while you write code, not just after the fact.


Is It Worth Adding to Your Project?

Here is an honest assessment.

Where it genuinely helps:

  • Onboarding onto a legacy codebase. Run it once and you immediately get a map of the biggest problems, organized by category.
  • Enforcing standards across a team. The CI integration with diff mode means new PRs cannot silently introduce new antipatterns without someone noticing.
  • Dead code. Most linters do not catch unused files and exports across the entire project. React Doctor does this out of the box.
  • Framework-specific rules. If you are on Next.js, generic linters miss a lot. React Doctor knows about Next.js patterns and flags them appropriately.

Where you should temper expectations:

  • It is not a replacement for a well-configured ESLint setup. It is a complement. If you already have strict ESLint rules, some overlap is inevitable.
  • The score is a rough guide, not a precise metric. A score of 72 versus 75 does not mean much. Focus on the specific diagnostics, not the number.
  • It is relatively new (still under active development with open issues and PRs). Some rules may be noisy or context-dependent, which is why the config ignore list exists.
  • The --fix flag hands off to an AI agent (Ami) to auto-fix issues. This part is more experimental and depends on external tooling.

Bottom line: if you run npx -y react-doctor@latest . --verbose on your project right now and nothing surprises you, you probably did not need it. But if it surfaces 50 unused exports, three components with missing keys in lists, and a handful of useEffect dependency issues you forgot about, that is a morning of tech debt cleanup you would not have found otherwise.

For the CI use case alone — automatically flagging React-specific regressions in PRs with zero config — it earns its place in a frontend workflow.


Getting Started in 60 Seconds

# Run against your project
npx -y react-doctor@latest . --verbose

# If you use workspaces, select specific packages
npx -y react-doctor@latest . --project my-app

# Only scan changed files vs main
npx -y react-doctor@latest . --diff main

# Output just the score (useful in scripts)
npx -y react-doctor@latest . --score

Enter fullscreen mode Exit fullscreen mode

The GitHub repo is at github.com/millionco/react-doctor.