← ClaudeAtlas

hook-rules-auditlisted

Audit React hook correctness — hook order, dependency arrays, stale closures, effects that should not exist, and cleanup. These are correctness bugs, not lint preferences. Load when writing or reviewing any component or custom hook.
soumit-kaz/lazysitter · ★ 1 · Code & Development · score 69
Install: claude install-skill soumit-kaz/lazysitter
# Hook rules audit Hook violations are not style. They produce wrong behaviour that is intermittent, environment-dependent, and extremely hard to reproduce — the worst combination to debug. ## Start mechanical ```bash lazysitter fe-index signals --rule REACT-CONDITIONAL-HOOK,REACT-HOOK-AFTER-RETURN,REACT-MISSING-DEP,REACT-DEPS-SUPPRESSED,REACT-EFFECT-NO-DEPS,REACT-SET-STATE-IN-RENDER,LEAK-NO-TEARDOWN ``` Findings marked `[heuristic]` need confirmation by reading the file. Say which are confirmed and which are candidates. ## 1. Hook order must be identical on every render React identifies hooks by call order, not by name. Anything that changes the order between renders corrupts the mapping between hooks and their state. Forbidden: a hook inside `if`, inside a loop, inside a callback, inside `try`, or **after an early return**. The early return is the one that slips through review, because it reads as defensive: ```jsx function Panel({ data }) { if (!data) return null; // ← every hook below is skipped on this path const [open, setOpen] = useState(false); ``` The fix is to move the guard **below** the hooks, not to disable the rule. Hooks first, then guards, then render. ## 2. Dependency arrays are correctness Every value a `useEffect`/`useMemo`/`useCallback` closure reads from the component scope must appear in its array. An incomplete array is a **stale closure**: the callback keeps a reference to the values from the render in which it was created, foreve