import { DocsWorkflow } from "@/components/docs/docs-workflow";

# How to fix issues

Every diagnostic names the file, line, rule, and a recommended fix.

## Recommended workflow

<DocsWorkflow
  steps={[
    {
      title: "Run a diff scan",
      command: "npx react-doctor@latest --verbose --diff",
    },
    {
      title: (
        <>
          Fix security and performance diagnostics first, then other{" "}
          <code>error</code> diagnostics
        </>
      ),
    },
    { title: "Re-run until the scan is clean" },
  ]}
/>

## Understand a diagnostic

Use the `why` subcommand when a rule is confusing or a suppression isn't working:

```bash
npx react-doctor@latest why src/App.tsx:42
```

To learn what a rule means in general, use `rules explain`:

```bash
npx react-doctor@latest rules explain react-doctor/no-derived-state-effect
```

## Suppress only when needed

Prefer fixing the root cause. When a suppression is appropriate, keep it narrow:

```tsx
// react-doctor-disable-next-line react-doctor/no-derived-state-effect
useEffect(() => {
  setValue(expensiveInitialValue);
}, []);
```

Use comma-separated rule names for multiple suppressions on one line.