React useEffect

Overview

useEffect is an escape hatch — it synchronizes a component with an external system. If there's no external system involved, you probably don't need an effect.

"Code that runs because a component was displayed should be in Effects. The rest should be in events." — React docs

Decision Tree

Code you want to run...
  ├─ User clicked / submitted / performed action?
  │         → Event handler
  ├─ Derivable from existing state/props?
  │         → Compute during render (or useMemo)
  ├─ Need to reset state when a prop changes?
  │         → key on the component
  ├─ Need to notify parent about state change?