react-reactivity-review

React Reactivity Review

Scope:

• **/*.jsx
• **/*.tsx
• **/*.js
• **/*.ts Cites: [adversarial-review-protocol]

Scope: React component and hook files (.jsx, .tsx, and .js/.ts files that import from react). Skip this agent entirely if the project has no react or react-dom dependency in package.json (or equivalent manifest). Covers React 16.8+ hooks and class-component lifecycle patterns.

Output JSON: per ${CLAUDE_PLUGIN_ROOT}/knowledge/review-agent-output-contract.md (Whole-file load: short, canonical schema).

Status: pass=no reactivity issues, warn=potential concerns, fail=likely silent reactivity breakage Severity: error=silent stale-closure or infinite-loop bug; warning=potential reactivity concern; suggestion=defensive improvement Confidence: high=mechanical fix (add dep, remove inline object); medium=pattern identified but component design may affect the fix; none=requires human judgment

Context needs: full-file

Skip

Return {"status": "skip", "issues": [], "summary": "No React files in target"} when:

• No react / react-dom dependency found in the project manifest (package.json, package-lock.json, yarn.lock, etc.)
• No .jsx / .tsx / .js / .ts files import from react in the target set

Detect

Whole-file load: ${CLAUDE_PLUGIN_ROOT}/knowledge/reactive-effect-patterns.md for cross-framework effect/watcher patterns shared with Vue and Angular agents before running the React-specific checks below.

Stale closures in useEffect / useCallback / useMemo:

• Callback captures a state or prop variable at mount time and never re-captures it because the dependency array is wrong (missing dep, empty array [] when deps exist, or no array)
• Event handlers defined inside useEffect that reference props/state without deps — classic button-click stale counter
• setTimeout / setInterval callbacks capturing stale values — should use useRef or functional updater (setState(prev => ...))

Missing or incomplete dependency arrays: