`useEffect` runs work outside a component’s render. Use it when that work should follow a render or respond to changing values—for example, tracking renders or persisting state to local storage. Keep the work out of the render function when it may slow rendering. section 3.3.2 section 8.3.1
The dependency array determines when the effect runs:
- Omit it to run after every render, including renders caused by a parent. Listing every prop and state value is not equivalent. section 3.3.2
- Pass `[]` to run on mount rather than on ordinary subsequent renders. section 3.3
- Pass `[id]` to run on mount and when `id` changes. With multiple dependencies, a change to any one triggers the effect; React compares their values by referential equality. section 3.3
Persist state without reading it in the effect
Initialize state from local storage when stored values exist, then use an effect to write updates whenever that state changes: `useEffect(() => { localStorage.setItem('items', JSON.stringify(items)); }, [items]);`. The state belongs in the dependency array so the write follows its updates. section 8.3.1 section 3.3
An effect may return a cleanup function. Cleanup runs before a changed dependency causes that effect to run again, and on unmount. In TypeScript, the effect needs no type argument, but it must return either nothing or a cleanup function: `return false` produces a type error. For an interval, return `() => clearInterval(interval)`; use `return;` for a branch that starts no interval. section 3.1.2 section 3.3 section 6.1.4
Do not treat an empty dependency array as a guarantee that an effect executes exactly once in development. With React 18 or later, Strict Mode can rerun effects and their cleanups while checking component behavior. A component may render twice without mounting twice; compare development logs with a run outside Strict Mode before diagnosing the sequence. section 3.1.2
initializing count to 0 rendering with 0 initializing count to 1 rendering with 1 effect first time? true setting count from 1 to 2 effect every time? 1 cleaning up cleaning up every time effect first time? false effect every time? 1 setting count from 2 to 3 rendering with 3 setting count from 2 to 3 rendering with 3 cleaning up every time effect every time? 3
The Strict Mode console output shows an effect and its cleanup repeating despite an empty dependency array, alongside repeated renders and state-setter calls. section 3.1.2
