What problem does it solve? React developers frequently overuse useEffect for tasks like deriving state, handling user events, and resetting state, which causes extra re-renders, stale data, race conditions, and hard-to-debug Effect chains. ## Core Features & Use Cases - Quick Reference and Decision Tree: A DO/DON'T table and flowchart that map common scenarios (derived state, prop changes, user events, data fetching) to the right React pattern. - Nine Anti-Patterns with Fixes: Detailed bad/good code examples covering redundant derived state, Effect chains, parent notification via Effect, fetching without cleanup, and app initialization pitfalls. - Eight Better Alternatives: Patterns including calculating during render, useMemo, the key prop, useSyncExternalStore, lifting state up, and custom data-fetching hooks with cleanup. - Use Case: When a search component shows stale results because fast typing triggers out-of-order fetch responses, apply the cleanup-flag pattern to ignore stale responses and eliminate the race condition. ## Quick Start Ask the assistant to review your React component's useEffect code and recommend whether an Effect is needed or a better alternative applies.
