react/useEffect

useEffect runs after the browser has painted, and it exists specifically for synchronizing a component with something outside React's own rendering — subscriptions, direct DOM manipulation, network requests, timers. It's not meant for computing a value derived from existing props or state, which should usually just be calculated directly during render instead of stored in an effect-updated state variable.

The dependency array controls when the effect re-runs: omit it entirely and the effect runs after every render, pass an empty array and it runs once after mount, pass specific values and it re-runs whenever any of them change. The cleanup function (the function an effect can return) runs before the next effect execution and on unmount — and forgetting it, or omitting a dependency the effect actually uses, is the single most common source of stale closures and subtle bugs in effect-heavy code.