React Doctor

https://www.react.doctor/docs
Admin
React Doctor is a deterministic scanner for React security risks and performance regressions, also...
Tokens:440,979
Snippets:7,289
Trust Score:6.2
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install React Doctor

Source: https://www.react.doctor/docs/reference/cli-reference

Executes the interactive setup to install the react-doctor skill for coding agents.

```bash
npx react-doctor install [options]
```

--------------------------------

### Install dependencies securely

Source: https://www.react.doctor/docs/rules/react-doctor/build-pipeline-secret-boundary

Use this command to install dependencies in an environment without secrets to prevent postinstall script access.

```bash
npm ci --ignore-scripts
```

--------------------------------

### Install the agent skill

Source: https://www.react.doctor/docs/getting-started/install-for-coding-agents

Initiates the installer to detect coding agents and configure the React Doctor skill, optionally adding pre-commit hooks.

```bash
npx react-doctor@latest install
```

--------------------------------

### Example of a Server Action for logout

Source: https://www.react.doctor/docs/rules/react-doctor/nextjs-no-side-effect-in-get-handler

Move cookie mutations from GET handlers to a Server Action invoked via a form or button.

```javascript
async function logout(){ "use server"; (await cookies()).delete("session"); redirect("/") }
```

--------------------------------

### React Fragment Syntax Examples

Source: https://www.react.doctor/docs/rules/react-doctor/jsx-fragments

Examples of fragment usage that are intentionally ignored by the rule, such as fragments with keys or self-closing tags.

```jsx
<Fragment key="k">...</Fragment>
```

```jsx
<Fragment />
```

--------------------------------

### State Management Migration Patterns

Source: https://www.react.doctor/docs/rules/react-doctor/no-set-state

Examples of state management alternatives to this.setState.

```javascript
const [count, setCount] = useState(0)
```

```javascript
this.someHandler = this.setState
```

--------------------------------

### Prop and child edge case examples

Source: https://www.react.doctor/docs/rules/react-doctor/jsx-curly-brace-presence

Examples demonstrating specific behaviors for props and children involving special characters and quote types.

```jsx
<Box mb={'1rem {}'} />
```

```jsx
prop={"< style: true >"}
```

```jsx
<App>{'foo "bar"'}</App>
```

--------------------------------

### Server authentication in actions

Source: https://www.react.doctor/docs/rules

Ensure authentication is verified at the start of server actions before accessing data.

```javascript
const session = await auth()
```

--------------------------------

### Configure Action Versioning

Source: https://www.react.doctor/docs/ci-and-prs/updating-ci

Examples for pinning the Action version in the workflow file.

```yaml
- uses: millionco/react-doctor@v2
```

```yaml
- uses: millionco/react-doctor@e3f0a1c2b4d5968778899aabbccddeeff0011223 # a commit
- uses: millionco/react-doctor@v2.3.1 # an exact tag
```

--------------------------------

### Redundant role examples

Source: https://www.react.doctor/docs/rules/react-doctor/no-redundant-roles

Examples of elements with redundant role attributes that trigger the rule.

```jsx
<button role='button'>
```

```jsx
<img role='img'>
```

--------------------------------

### Recommended Import Pattern

Source: https://www.react.doctor/docs/rules/react-doctor/no-barrel-import

Use direct paths to specific components instead of importing from a barrel file.

```javascript
import { Button } from './components/Button'
```

--------------------------------

### Install CI workflow

Source: https://www.react.doctor/docs/overview/quickstart

Automatically generate a GitHub Actions workflow file for continuous integration.

```bash
npx react-doctor@latest ci install
```

--------------------------------

### JSX Spread Attribute Examples

Source: https://www.react.doctor/docs/rules/react-doctor/jsx-props-no-spreading

Examples of JSX spread patterns that trigger the rule.

```jsx
<C {...props} />
```

```jsx
<Foo {...{ a, b }} />
```

```jsx
{...{ ...rest }}
```

```jsx
{...props}
```

--------------------------------

### Reviewing arbitrary pixel font size patterns

Source: https://www.react.doctor/docs/rules/react-doctor/no-arbitrary-px-font-size

Examples showing the transition from pixel-based arbitrary font sizes to recommended rem-based values.

```jsx
<p className="text-[13px]">Last updated today</p>
```

```jsx
<p className="text-[0.8125rem]">Last updated today</p>
```

--------------------------------

### Example of forbidden prop usage

Source: https://www.react.doctor/docs/rules/react-doctor/forbid-component-props

An example of a forbidden prop usage that should be replaced by a design-system token.

```jsx
<Card className="p-4" />
```

--------------------------------

### Correct usage of onDblClick

Source: https://www.react.doctor/docs/rules/react-doctor/preact-prefer-ondblclick

Example of a host element using the correct Preact-compatible attribute name.

```jsx
<li onDblClick={openInline}>
```

--------------------------------

### Reported pattern example

Source: https://www.react.doctor/docs/rules/react-doctor/no-manufactured-contrast-copy

An example of hardcoded copy within a React component that may trigger the rule.

```javascript
const Page = () => (
  <main>
    <p>Not just another report. It is a plan.</p>
    <p>No busywork. Just useful diagnostics.</p>
    <p>Not a wall of warnings. You get prioritized fixes.</p>
  </main>
);
```

--------------------------------

### Remove repeating gradient decoration

Source: https://www.react.doctor/docs/rules/react-doctor/no-repeating-gradient-decoration

The before example shows a div with a repeating-linear-gradient style, while the after example shows the removal of that decoration.

```jsx
<div
  style={{
    backgroundImage:
      "repeating-linear-gradient(45deg, #fff 0 4px, #eee 4px 8px)",
  }}
/>;
```

```jsx
<div />
```

--------------------------------

### Remove decorative radial spotlight

Source: https://www.react.doctor/docs/rules/react-doctor/no-decorative-radial-spotlight

The before example shows a div with a radial-gradient background, while the after example removes the decorative style.

```jsx
<div
  style={{
    width: 320,
    height: 180,
    backgroundImage:
      "radial-gradient(circle, rgb(37 99 235 / 25%), transparent 70%)",
  }}
/>
```

```jsx
<div style={{ width: 320, height: 180 }} />
```

--------------------------------

### Implement next/font/google

Source: https://www.react.doctor/docs/rules/react-doctor/nextjs-no-font-link

Replace external font links with the next/font/google package to self-host fonts at build time.

```javascript
import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] });
```

--------------------------------

### Refactor repeated section shells

Source: https://www.react.doctor/docs/rules/react-doctor/no-repeated-section-shells

The before example shows repetitive section wrappers, while the after example demonstrates varied composition and rhythm.

```jsx
const Page = () => (
  <main>
    <section className="py-20">
      <div className="mx-auto max-w-6xl">Intro</div>
    </section>
    <section className="py-24">
      <div className="mx-auto max-w-6xl">Features</div>
    </section>
    <section className="py-20">
      <div className="mx-auto max-w-6xl">Pricing</div>
    </section>
  </main>
);
```

```jsx
const Page = () => (
  <main>
    <section className="py-20">
      <div className="mx-auto max-w-6xl">Intro</div>
    </section>
    <section className="grid gap-6 py-12">Features</section>
    <section className="py-16">
      <div className="mx-auto max-w-4xl">Pricing</div>
    </section>
  </main>
);
```

--------------------------------

### Recommended static import path

Source: https://www.react.doctor/docs/rules/react-doctor/no-dynamic-import-path

Use a string-literal path to allow the bundler to correctly identify and split the chunk.

```javascript
import('./feature/heavy.js')
```

--------------------------------

### Examples of non-interactive elements with interactive roles

Source: https://www.react.doctor/docs/rules/react-doctor/no-noninteractive-element-to-interactive-role

These examples trigger the rule because they assign interactive roles to elements that are not inherently interactive.

```jsx
<li role="button">
```

```jsx
<h2 role="menuitem">
```

```jsx
<table role="button">
```

--------------------------------

### Tailwind v4 class migration example

Source: https://www.react.doctor/docs/rules/react-doctor/no-deprecated-tailwind-class

Demonstrates the transformation from a deprecated flex-shrink utility to the modern shrink utility.

```jsx
<aside className="flex-shrink-0" />
```

```jsx
<aside className="shrink-0" />
```

--------------------------------

### Revised pattern example

Source: https://www.react.doctor/docs/rules/react-doctor/no-manufactured-contrast-copy

An example of refactoring hardcoded copy to use dynamic props, aligning with design system patterns.

```javascript
const Page = ({ approvedCopy }) => (
  <main>
    <p>{approvedCopy.primaryValue}</p>
    <p>{approvedCopy.supportingValue}</p>
    <p>{approvedCopy.outcome}</p>
  </main>
);
```

--------------------------------

### List and Manage Rules via CLI

Source: https://www.react.doctor/docs/rules

Commands to view rule severity and modify rule configurations within a project.

```bash
react-doctor rules list
```

```bash
rules explain
```

```bash
rules set
```

```bash
rules disable
```

--------------------------------

### Redundant curly brace examples

Source: https://www.react.doctor/docs/rules/react-doctor/jsx-curly-brace-presence

Examples of JSX attributes and children that trigger the rule due to unnecessary curly braces.

```jsx
prop={'bar'}
```

```jsx
<App>{'foo'}</App>
```

```jsx
<App>{<myApp/>}</App>
```

--------------------------------

### Correct and Incorrect forwardRef Usage

Source: https://www.react.doctor/docs/rules/react-doctor/forward-ref-uses-ref

Examples showing how to properly implement forwardRef or remove it when unnecessary.

```javascript
forwardRef((props, ref) => <input ref={ref} {...props} />)
```

```javascript
function MyInput(props) { ... }
```

--------------------------------

### Fixing unhandled mutateAsync promise

Source: https://www.react.doctor/docs/rules/react-doctor/query-floating-mutate-async

The before example shows a floating mutateAsync call, while the after example demonstrates the correct usage by awaiting the promise.

```typescript
import {
  useMutation,
  useQueryClient,
} from "@tanstack/react-query";

const useSaveForm = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: saveForm,
    onSuccess: () =>
      queryClient.invalidateQueries({ queryKey: ["forms"] }),
  });
  return async (formData) => {
    mutation.mutateAsync(formData);
  };
};
```

```typescript
import {
  useMutation,
  useQueryClient,
} from "@tanstack/react-query";

const useSaveForm = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: saveForm,
    onSuccess: () =>
      queryClient.invalidateQueries({ queryKey: ["forms"] }),
  });
  return async (formData) => {
    await mutation.mutateAsync(formData);
  };
};
```

--------------------------------

### Reported and Corrected Icon Patterns

Source: https://www.react.doctor/docs/rules/react-doctor/no-mixed-icon-libraries

Examples showing the transition from mixed icon libraries to a unified library.

```javascript
import { XMarkIcon } from "@heroicons/react/24/outline";
import { Search } from "lucide-react";
const Toolbar = () => (
  <>
    <Search />
    <XMarkIcon />
  </>
);
```

```javascript
import { Search, X } from "lucide-react";
const Toolbar = () => (
  <>
    <Search />
    <X />
  </>
);
```

--------------------------------

### Use useWindowDimensions for responsive sizing

Source: https://www.react.doctor/docs/rules

Replaces Dimensions.get() to ensure reactive updates on rotation and resize.

```javascript
const { width, height } = useWindowDimensions()
```

--------------------------------

### Manage rules via CLI

Source: https://www.react.doctor/docs/configuration/config-files

Use these commands to list, explain, disable, or modify rule settings directly in the configuration file.

```bash
npx react-doctor@latest rules list
npx react-doctor@latest rules explain react-doctor/no-array-index-as-key
npx react-doctor@latest rules disable react-doctor/no-array-index-as-key
npx react-doctor@latest rules set react-doctor/no-danger warn
npx react-doctor@latest rules category Performance off
npx react-doctor@latest rules ignore-tag design
```

--------------------------------

### Configure ESLint plugin

Source: https://www.react.doctor/docs/configuration/eslint-and-oxlint-plugins

Import the plugin and include the desired framework-specific or recommended configuration presets in your flat config file.

```js
import reactDoctor from "eslint-plugin-react-doctor";

export default [
  reactDoctor.configs.recommended,
  reactDoctor.configs.next,
  reactDoctor.configs["react-native"],
  reactDoctor.configs["tanstack-start"],
  reactDoctor.configs["tanstack-query"],
  reactDoctor.configs.preact,
];
```

--------------------------------

### Remove imitation browser controls from Preview component

Source: https://www.react.doctor/docs/rules/react-doctor/no-fake-browser-chrome

The Before example shows a component with hardcoded browser-like dots, while the After example removes them to adhere to the design guidance.

```jsx
const Preview = ({ height, previewAlt, previewSrc, width }) => (
  <div className="overflow-hidden rounded-xl border">
    <div className="flex gap-2">
      <span className="size-3 rounded-full bg-red-500" />
      <span className="size-3 rounded-full bg-yellow-500" />
      <span className="size-3 rounded-full bg-green-500" />
    </div>
    <img src={previewSrc} alt={previewAlt} width={width} height={height} />
  </div>
);
```

```jsx
const Preview = ({ height, previewAlt, previewSrc, width }) => (
  <div className="overflow-hidden rounded-xl border">
    <img src={previewSrc} alt={previewAlt} width={width} height={height} />
  </div>
);
```

--------------------------------

### Preventing premature submission during IME composition

Source: https://www.react.doctor/docs/rules/react-doctor/no-enter-submit-without-ime-composition-guard

The before example shows a vulnerable input handler, while the after example demonstrates the correct implementation using the nativeEvent.isComposing property.

```jsx
<input onKeyDown={(event) => event.key === "Enter" && submit()} />
```

```jsx
const Field = ({ onSave }) => {
  const commitEdit = () => {
    onSave();
  };
  return (
    <input
      onKeyDown={(event) => {
        if (event.key === "Enter" && !event.nativeEvent.isComposing) {
          commitEdit();
        }
      }}
    />
  );
};
```

--------------------------------

### Enable custom plugin in configuration

Source: https://www.react.doctor/docs/configuration/add-custom-rules

Register the plugin path and enable specific rules using the plugin namespace.

```json
{
  "$schema": "https://react.doctor/schema/config.json",
  "plugins": ["./lint/team-conventions.cjs"],
  "rules": {
    "team-conventions/no-forbidden-word": "error"
  }
}
```

--------------------------------

### Reviewing and revising button padding patterns

Source: https://www.react.doctor/docs/rules/react-doctor/no-symmetric-text-button-padding

Examples showing a reported symmetric padding pattern and a suggested revision using asymmetric padding.

```jsx
<button className="p-3">Save changes</button>
```

```jsx
<button className="px-4 py-2">Save changes</button>
```

--------------------------------

### Loading Action Preservation Transformation

Source: https://www.react.doctor/docs/rules/react-doctor/loading-action-preserves-trigger

The before example shows a button being replaced by a status span, while the after example demonstrates keeping the button mounted with aria-busy and disabled attributes.

```javascript
import { useState } from "react";
const SaveButton = () => {
  const [isSaving, setIsSaving] = useState(false);
  const save = async () => {
    setIsSaving(true);
    try {
      const response = await fetch("/api/save", { method: "POST" });
      if (!response.ok) throw new Error("Could not save");
    } catch (error) {
      reportError(error);
    } finally {
      setIsSaving(false);
    }
  };
  return isSaving
    ? <span role="status">Saving</span>
    : <button onClick={save}>Save</button>;
};
```

```javascript
import { useState } from "react";
const SaveButton = () => {
  const [isSaving, setIsSaving] = useState(false);
  const save = async () => {
    setIsSaving(true);
    try {
      const response = await fetch("/api/save", { method: "POST" });
      if (!response.ok) throw new Error("Could not save");
    } catch (error) {
      reportError(error);
    } finally {
      setIsSaving(false);
    }
  };
  return <button aria-busy={isSaving} disabled={isSaving} onClick={save}>
    {isSaving ? "Saving…" : "Save"}
  </button>;
};
```

--------------------------------

### Lazy-init the ref

Source: https://www.react.doctor/docs/rules/react-doctor/rerender-lazy-ref-init

The recommended pattern to avoid re-allocating expensive objects on every render.

```javascript
const ref = useRef(null); if (ref.current === null) ref.current = expensiveCall()
```
Tokens:
Raw