React Doctor

The Zed extension runs the React Doctor language server to provide:

• Live diagnostics: Real-time feedback as you type (including unsaved buffers).
• Precise ranges: Diagnostics point to exact offending nodes rather than entire lines.
• Hovers: Hover over diagnostics to see rule documentation.
• Quick fixes: Inline suppression of diagnostics for .ts, .tsx, .js, and .jsx files.

Supported languages: TypeScript, TSX, and JavaScript (including JSX).

Fuzz liveness targets are specialized programs designed to intentionally contain diagnostics. They are used during fuzzing to ensure that updated rules remain on their reporting paths, preventing early exits and ensuring strict runs exercise the full logic of the rules.

When performing false-positive hunting, the fuzzer is configured to load only corpus/regressions/, where every program is guaranteed to be valid by contract.

When running the language server, you get the following editor integrations:

• Live diagnostics: Real-time scanning of unsaved buffers with precise underlines on offending tokens.
• Rich hovers: Hovering over issues displays the rule ID, severity, category, recommendations, suppression hints, and documentation links.
• Quick fixes: Actions to disable rules for specific lines (using correct // or {/* ... */} syntax), suppress all issues in a file, or explain/report issues.
• Workspace awareness: Automatic discovery of React projects and monorepo packages, with automatic cache invalidation when package.json or lockfiles change.
• Status indicators: Progress reporting and server status notifications (health, quiescent, message).

React Router rules in React Doctor are categorized by their operational mode. Understanding these modes is necessary to know which rules apply to your specific implementation:

• Framework mode: Used when @react-router/dev or similar framework-specific packages are detected.
• Data mode: Focuses on data-related APIs like loaders, actions, fetchers, and route.lazy.
• Declarative mode: Standard React component usage where data-fetching APIs (like loaders) do not exist.
• All modes: Rules that apply regardless of the specific mode detected.

Rules are also prioritized by severity (P0, P1, P2), where P0 rules address harmful behaviors with direct runtime or security consequences.

Since this extension is not yet published to the Zed extension registry, you must install it manually as a development extension:

1. Open Zed.
2. Open the command palette and run zed: extensions (or navigate to Zed → Extensions).
3. Click Install Dev Extension.
4. Select the directory: packages/zed-react-doctor.

Note: Zed will compile the Rust extension to WebAssembly during installation. If you pull changes to the extension, reload it from the Extensions view.

The improve-react skill is a read-only advisor designed to survey a React codebase, identify high-leverage improvements, and produce prioritized implementation plans.

Key distinctions:

• Unlike the react-doctor skill, improve-react never modifies source code. It only creates files in the plans/ directory.
• It uses React Doctor's scan results as machine-verified evidence to supplement human-like judgment (e.g., determining if a performance finding is on a 'hot path' or a 'cold path').
• It is intended for users asking to "improve the React code", "audit this codebase", or "make this app faster".

When to use instead:

• For regression checks or immediate fixes, use the react-doctor skill.

When reviewing rule implementations, classify feedback into the following categories to determine the required action:

| Category | Action | Examples | | :--- | :--- | : | | Fix now | Immediate fix required | Real false positives/negatives, incorrect AST semantics, scope resolution bugs, or control-flow bugs. | | Usually fix | Standard cleanup | Duplicated helpers, misleading names, unnecessary abstractions, or confusing comments. | | Document or defer | Acceptable limitations | False-negative coverage outside v1 scope, path explosion, complex loop/try-catch modeling, or imported file analysis. | | Reject | Do not implement | Suggestions that broaden the rule beyond its message, increase false positives, or conflict with repo style. |

Note: Always add a regression test for every real bug fixed during the review process.

React Doctor provides live diagnostics, hovers, and quick fixes in VS Code and Cursor. To ensure diagnostics match your CLI and CI environments, it is highly recommended to add react-doctor to your project's development dependencies. This allows the extension to use your project's specific version instead of a fallback.

npm i -D react-doctor

MobX does not support makeAutoObservable(this) in classes that extend another class or are themselves extended. Using it in an inheritance hierarchy can cause runtime errors.

Recommended alternatives:

• Use composition instead of inheritance.
• Use explicit makeObservable annotations to define exactly which properties are observable.

import { action, makeObservable, observable, override } from "mobx";

class ChildStore extends BaseStore {
  count = 0;

  constructor() {
    super();
    // Use explicit annotations instead of makeAutoObservable
    makeObservable(this, { count: observable, reset: override });
  }

  reset() {
    this.count = 0;
  }
}