React Effects Guidelines

Primary reference: https://react.dev/learn/you-might-not-need-an-effect

Quick Decision Tree

Before adding useEffect, ask:

1. Can I calculate this during render? → Derive it, don't store + sync
2. Is this resetting state when a prop changes? → Use key prop instead
3. Is this triggered by a user event? → Put it in the event handler
4. Am I syncing with an external system? → Effect is appropriate

Legitimate Effect Uses

• DOM manipulation (focus, scroll, measure)
• External widget lifecycle (terminal, charts, non-React libraries)
• Browser API subscriptions (ResizeObserver, IntersectionObserver)
• Data fetching on mount/prop change