react-effects-audit

**Target:** $ARGUMENTS # React Effects Audit ## Overview Scan React codebases to detect unnecessary `useEffect` usage based on official React documentation ("You Might Not Need an Effect"). Reports anti-patterns with severity, location, and recommended fixes. --- ## Agent Workflow (MANDATORY) ``` PHASE 1: Scan target files (Glob *.tsx, *.jsx, *.ts, *.js) PHASE 2: Detect anti-patterns (Grep detection rules) PHASE 3: Analyze context (Read flagged files) PHASE 4: Generate report with fixes ``` --- ## Anti-Pattern Summary | # | Anti-Pattern | Severity | Detection | |---|---|---|---| | 1 | Derived state in Effect | WARNING | `useEffect` + `setState` from other state/props | | 2 | Expensive calculation in Effect | WARNING | `useEffect` + `setState` with filter/map/reduce | | 3 | State reset via Effect | WARNING | `useEffect` resets state when prop changes | | 4 | Event logic in Effect | CRITICAL | User interaction logic inside `useEffect` | | 5 | Parent notification via Effect | WARNING | `useEffect` calls parent `onChange`/`onUpdate` | | 6 | Effect chains | CRITICAL | Multiple `useEffect` triggering each other | | 7 | Missing cleanup in fetch | CRITICAL | `useEffect` fetch without cleanup/AbortController | | 8 | Manual store subscription | WARNING | `addEventListener`/`subscribe` in `useEffect` | | 9 | App init in Effect | INFO | One-time init logic in `useEffect(fn, [])` | --- ## Severity Levels | Level | Meaning | Action | |---|---|---| | CRITICAL | Bugs, race condit...