useEffect

When calculating derived data from props or state for rendering
Avoid useEffect when you can calculate derived data during rendering. Effects are for synchronizing with external systems. For expensive pure calculations, calculate during render and use useMemo when you need to cache the result between renders.
When synchronizing with a browser API or external widget
When subscribing to an external event source with cleanup
When starting a data fetch that must stay synchronized with props