How does useEffect work and what are common pitfalls?

Question

Accepted Answer

**useEffect** is a React hook that runs **side effects** after render. It replaces the lifecycle methods from class components: `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` — all combined into one API.

**How it works step-by-step:**
1. Component renders with initial props/state
2. React commits the DOM changes to the screen
3. **After** the browser paints, React runs your effect function
4. If the effect returns a **cleanup function**, React runs it before the next effect execution and on unmount

**Three dependency patterns:**
```tsx
// 1. No deps array — runs after EVERY render
useEffect(() => {
  console.log("I run on every render");
});

// 2. Empty deps array — runs ONCE on mount (and cleanup on unmount)
useEffect(() => {
  console.log("I run once on mount");
  return () => console.log("I run on unmount");
}, []);

// 3. With deps — runs when ANY dependency changes
useEffect(() => {
  console.log("count changed:", count);
}, [count]); // only runs when count changes
```

**Cleanup functions are critical** — they run:
- **Before** the effect re-runs (when deps change)
- **On unmount** (when component is removed from DOM)
- Used for: removing event listeners, clearing timers, canceling fetch requests, unsubscribing from subscriptions

**Common pitfall 1 — Missing dependencies (stale closure):**
```tsx
// BAD: count is "stale" — always shows initial value
useEffect(() => {
  const interval = setInterval(() => {
    console.log(count); // Always 0!
  }, 1000);
  return () => clearInterval(interval);
}, []); // Missing count dependency!

// GOOD: count is always current
useEffect(() => {
  const interval = setInterval(() => {
    console.log(count); // Current value
  }, 1000);
  return () => clearInterval(interval);
}, [count]);
```

**Common pitfall 2 — Infinite loops:**
```tsx
// BAD: setting state in effect without proper deps = infinite loop
useEffect(() => {
  setData(fetchedData); // triggers re-render → effect runs again
}, [data]); // data changes every render → infinite loop!

// GOOD: use a different dependency
useEffect(() => {
  const controller = new AbortController();
  fetch(url, { signal: controller.signal })
    .then(res => res.json())
    .then(setData);
  return () => controller.abort();
}, [url]); // Only runs when URL changes
```

**Common pitfall 3 — Cleanup forgotten (memory leaks):**
```tsx
// BAD: subscription never cleaned up
useEffect(() => {
  window.addEventListener("resize", handleResize);
  // Missing cleanup!
}, []);

// GOOD: properly cleaned up
useEffect(() => {
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);
```

**ESLint rule:** The `react-hooks/exhaustive-deps` ESLint plugin will warn you about missing dependencies. **Always follow its suggestions** — it catches the majority of useEffect bugs.

**When NOT to use useEffect:**
- **Deriving state from props** — use `useMemo` instead
- **Responding to user events** — handle them in the event handler directly
- **Resetting state on prop change** — use a `key` prop instead

React: How does useEffect work and what are common pitfalls?