What problem does it solve? React developers frequently misuse useEffect for derived state, event logic, and data fetching, leading to stale closures, memory leaks, race conditions, and Strict Mode failures. This Skill provides clear principles for when and how to use hooks correctly. ## Core Features & Use Cases - Effect Discipline: Distinguishes effects that synchronize with external systems (browser APIs, subscriptions, timers) from logic that belongs in event handlers or render. - Dependency and Cleanup Rules: Explains dependency arrays as declarations of reactive values, mandates cleanup for subscriptions, and covers AbortController-based fetch cancellation. - Modern React Patterns: Covers useRef vs useState, custom hook extraction, useEffectEvent and use() on React 19+, and Strict Mode idempotency. - Use Case: When reviewing a component that fetches invoice data in a useEffect, apply this Skill to add cancellation, fix the dependency array, and recommend TanStack Query for server state. ## Quick Start Review this React component's hooks and effects and fix any stale closures, missing cleanup, or unnecessary derived state.
