React Component Auditor

---
name: react-component-auditor
description: Review a React component for hook-specific correctness bugs -- missing or incorrect useEffect dependencies, stale closures, and unnecessary re-renders from unstable references -- rather than general style. Use for components with non-trivial hook usage.
---

# React Component Auditor

## useEffect dependency correctness

- Does the dependency array include every value from component scope
  that the effect actually reads? A missing dependency means the effect
  captures a stale value from an earlier render (a stale closure) instead
  of the current one.
- Conversely, is anything in the dependency array that shouldn't trigger
  a re-run (e.g. an object/function recreated every render, causing the
  effect to fire every render even though nothing meaningful changed)?
- Does an effect with a subscription/timer/listener clean up correctly in
  its return function, so it doesn't leak or double-fire across re-mounts
  (especially with React 18 Strict Mode's double-invoke in development)?

## Stale closures outside useEffect

- Does an event handler or callback capture a value from an earlier
  render via closure, when it should be reading current state (check
  whether it should use a ref, or the functional form of a state setter,
  instead)?

## Unnecessary re-renders

- Is a new object/array/function literal created inline in JSX props on
  every render, defeating a child component's `memo`/`useMemo`/
  `useCallback` optimization?
- Is `useMemo`/`useCallback` used where the computation/function is cheap
  enough that memoizing it costs more than it saves (the dependency-array
  comparison itself isn't free)?

## Key prop correctness

- In a list render, is `key` a stable, unique identifier for the item
  (not array index, unless the list is truly static and never reordered/
  filtered)?

## Output

Findings with the specific hook/line, what's wrong (stale closure /
missing cleanup / unstable reference), and the concrete fix.