react-useeffectlisted

# You Might Not Need an Effect Effects are an **escape hatch** from React. They let you synchronize with external systems. If there is no external system involved, you shouldn't need an Effect. ## Quick Reference | Situation | DON'T | DO | |-----------|-------|-----| | Derived state from props/state | `useState` + `useEffect` | Calculate during render | | Expensive calculations | `useEffect` to cache | `useMemo` | | Reset state on prop change | `useEffect` with `setState` | `key` prop | | User event responses | `useEffect` watching state | Event handler directly | | Notify parent of changes | `useEffect` calling `onChange` | Call in event handler | | Fetch data | `useEffect` without cleanup | `useEffect` with cleanup OR framework | ## When You DO Need Effects - Synchronizing with **external systems** (non-React widgets, browser APIs) - **Subscriptions** to external stores (use `useSyncExternalStore` when possible) - **Analytics/logging** that runs because component displayed - **Data fetching** with proper cleanup (or use framework's built-in mechanism) ## When You DON'T Need Effects 1. **Transforming data for rendering** - Calculate at top level, re-runs automatically 2. **Handling user events** - Use event handlers, you know exactly what happened 3. **Deriving state** - Just compute it: `const fullName = firstName + ' ' + lastName` 4. **Chaining state updates** - Calculate all next state in the event handler ## Decision Tree ``` Need to respond to something? ├── Us