React Hooks Auditor

The Problem

Your React app has a intermittent bug: after navigating to a settings page and back, the chat component displays messages from the previous room. The root cause is a stale closure in useEffect — roomId captured once at mount and never updated because it's missing from the dependency array. ESLint didn't catch it because eslint-disable was added six months ago during a refactor. This bug ships to production. Users see other people's conversations. The team spends three days debugging before finding the one useEffect with the wrong dependency array.

What You Get

• Detect stale closures in useEffect — find dependency arrays that omit variables used inside the effect body, catching the exact pattern where roomId, userId, or config gets captured once and never refreshed
• Identify Rules of Hooks violations — flag hooks called inside conditionals, loops, callbacks, or after early returns — the Critical-severity patterns that corrupt React's internal hook ordering
• Find derived state anti-patterns — detect useState + useEffect pairs that compute values that should be useMemo during render, eliminating dual sources of truth
• Flag over-memoization — catch useMemo wrapping trivial property access or useCallback wrapping inline functions passed to DOM elements (which don't benefit from referential stability)
• Detect missing cleanup functions — find useEffect hooks that add event listeners, timers, or WebSocket connections without returning cleanup functions, causing memory leaks and duplicate subscriptions
• Generate a severity-ranked audit report — CRITICAL through LOW findings with file paths, line numbers, the problematic pattern, why it matters, and a concrete before/after code fix

Why This Beats Prompting It Yourself

Asking an agent to "check my hooks" gives you a checklist of rules but no specific findings for your codebase. This skill reads every .tsx/.jsx/.ts/.js file in your project, matches patterns against 7 categories of anti-patterns, and produces a report that tells you exactly which useEffect at which line has which missing dependency. The difference between "you should be careful with dependency arrays" and "src/hooks/useChat.ts:28 — roomId missing from deps causes stale polling on navigation."

Example Session

You: "Audit src/hooks/ and src/components/ for hooks issues — I'm seeing stale data after navigation"

Agent:

# React Hooks Audit Report

Severity  Count
────────  ─────
Critical  2
High      3
Medium    4
Low       1

CRITICAL FINDINGS
═════════════════

[C-1] STALE CLOSURE: SETINTERVAL WITH MISSING DEP
─────────────────────────────────────────────────
File: src/hooks/useChat.ts:28
Pattern: useEffect(..., []) — roomId used but missing from deps
Fix: Add roomId to dependency array.

[C-2] HOOK CALLED CONDITIONALLY
───────────────────────────────
File: src/components/UserProfile.tsx:42
Pattern: if (isAdmin) { useAdminPermissions(); }
Fix: Call hook unconditionally; conditionally use the result.

Use Cases

• Pre-merge code review to catch hooks anti-patterns ESLint misses (derived state, over-memoization)
• Legacy codebase migration from class components to hooks — identify patterns that break under React 18/19 Strict Mode double-invoke
• Performance debugging when React apps show unexpected re-renders from missing memoization or large context objects
• Custom hook library review before publishing — validate naming, cleanup, and Rules of Hooks compliance
• React 19 migration prep — find patterns that React Compiler can optimize away vs. those that need manual fixes
• Team onboarding — new members read the audit report to understand the codebase's hooks conventions

Known Limitations

This is static analysis only — it cannot detect runtime-only bugs like race conditions, actual stale values at runtime, or timing-dependent state corruption. Cross-file dependency chains (a dependency imported from another module) may be missed. For full coverage, pair with React DevTools Profiler for runtime verification and eslint-plugin-react-hooks for syntactic violations.

Upgrade to Pro

Free produces the severity-ranked audit. React Hooks Auditor Pro ($5) closes the loop: auto-fix patches, re-render profiling, React 19 migration map, and Zustand/Redux store audits. Upgrade when the fix list is longer than an afternoon — Pro version.