Back to Details

react-doctor

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React Doctor

React Doctor

Scans your React codebase for security, performance, correctness, and architecture issues. Outputs a 0-100 score with actionable diagnostics.
扫描你的React代码库，检测安全、性能、正确性及架构方面的问题。输出0-100分的评分，并提供可执行的诊断建议。

Usage

使用方法

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

Workflow

工作流程

  1. Run the command above at the project root
  2. Read every diagnostic with file paths and line numbers
  3. Fix issues starting with errors (highest severity)
  4. Re-run to verify the score improved
  1. 在项目根目录运行上述命令
  2. 查看包含文件路径和行号的所有诊断信息
  3. 优先修复最高严重级别的错误问题
  4. 重新运行命令以验证评分是否提升

Rules (47+)

检测规则（47+项）

  • Security: hardcoded secrets in client bundle, eval()
  • State & Effects: derived state in useEffect, missing cleanup, useState from props, cascading setState
  • Architecture: components inside components, giant components, inline render functions
  • Performance: layout property animations, transition-all, large blur values
  • Correctness: array index as key, conditional rendering bugs
  • Next.js: missing metadata, client-side fetching for server data, async client components
  • Bundle Size: barrel imports, full lodash, moment.js, missing code splitting
  • Server: missing auth in server actions, blocking without after()
  • Accessibility: missing prefers-reduced-motion
  • Dead Code: unused files, exports, types
  • 安全：客户端包中的硬编码密钥、eval()使用
  • 状态与副作用：useEffect中的派生状态、缺失清理操作、从props初始化useState、级联setState
  • 架构：组件内部嵌套组件、巨型组件、内联渲染函数
  • 性能：布局属性动画、transition-all、大模糊值
  • 正确性：使用数组索引作为key、条件渲染bug
  • Next.js：缺失元数据、客户端获取服务器数据、异步客户端组件问题
  • 包体积：桶式导入、完整lodash引入、moment.js使用、缺失代码分割
  • 服务端：Server Actions中缺失权限验证、未使用after()导致阻塞
  • 可访问性：缺失prefers-reduced-motion适配
  • 死代码：未使用的文件、导出内容、类型定义

Score

评分标准

  • 75+: Great
  • 50-74: Needs work
  • 0-49: Critical
  • 75分及以上：优秀
  • 50-74分：需要改进
  • 0-49分：严重问题