react-useeffect

Topics in the source

• You Might Not Need an Effect
• Quick Reference
• When You DO Need Effects
• When You DON'T Need Effects
• Decision Tree
• Detailed Guidance

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. | 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 | 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) 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 upd

This is an excerpt. Refer to the complete source and its current requirements.