What is useEffect and when does it run?

Question

Accepted Answer

`useEffect` runs **side effects** — work that reaches outside React's rendering, like data fetching, subscriptions, timers, or manual DOM updates. It runs **after** the component renders, keeping side effects out of the render body (render must stay pure).

## The dependency array controls timing

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → runs after the first render and whenever `count` changed.
- **`[]`** (empty) → runs **once** after mount (good for one-time setup).
- **omitted** → runs after **every** render (rarely what you want).

## Cleanup: return a function

If an effect sets something up that needs tearing down, return a cleanup function. React calls it before the next effect run and when the component unmounts:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## Why cleanup matters

Without it, every re-run would add another timer/subscription and never remove the old one — a classic memory leak. The lifecycle for a `[dep]` effect is: *run effect → (dep changes) → run cleanup → run effect again*.

**Tip:** don't use effects for things you can compute during render (derive values instead), and include every value the effect reads in the dependency array (the `react-hooks/exhaustive-deps` lint rule helps).