What problem does it solve? React developers frequently misuse useEffect for derived state, event handling, and state resets, causing bugs like infinite loops, stale closures, and unnecessary re-renders. This Skill provides decision rules and code patterns to write correct React components. ## Core Features & Use Cases - Effect Discipline: Distinguishes when Effects are required (external system synchronization) versus when to use render-time calculations, useMemo, key props, or event handlers instead. - Dependency & Cleanup Patterns: Covers exhaustive-deps compliance, updater functions, useEffectEvent for non-reactive logic, and mandatory cleanup for subscriptions and fetches. - Refs and Custom Hooks: Explains correct ref usage (no render-time reads/writes, ref callbacks for lists, useImperativeHandle) and conventions for focused custom hooks. - Use Case: When refactoring a chat component that reconnects on every render, apply the patterns to move objects inside Effects and wrap callbacks with useEffectEvent to stabilize dependencies. ## Quick Start Review my React component and fix any incorrect useEffect usage following the react-best-practices guidelines.
