react-useeffect

1# You Might Not Need an Effect
2 
3Effects 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.
4 
5## Quick Reference
6 
7| Situation | DON'T | DO |
8|-----------|-------|-----|
9| Derived state from props/state | `useState` + `useEffect` | Calculate during render |
10| Expensive calculations | `useEffect` to cache | `useMemo` |
11| Reset state on prop change | `useEffect` with `setState` | `key` prop |
12| User event responses | `useEffect` watching state | Event handler directly |
13| Notify parent of changes | `useEffect` calling `onChange` | Call in event handler |
14| Fetch data | `useEffect` without cleanup | `useEffect` with cleanup OR framework |
15 
16## When You DO Need Effects
17 
18- Synchronizing with **external systems** (non-React widgets, browser APIs)
19- **Subscriptions** to external stores (use `useSyncExternalStore` when possible)
20- **Analytics/logging** that runs because component displayed
21- **Data fetching** with proper cleanup (or use framework's built-in mechanism)
22 
23## When You DON'T Need Effects
24 
251. **Transforming data for rendering** - Calculate at top level, re-runs automatically
262. **Handling user events** - Use event handlers, you know exactly what happened
273. **Deriving state** - Just compute it: `const fullName = firstName + ' ' + lastName`
284. **Chaining state updates** - Calculate all next state in the event handler
29 
30## Decision Tree
31 
32```
33Need to respond to something?
34…