Eight React hooks mistakes that survive code review

Mistake 1: using an effect to derive state

If a value can be calculated from props or state, calculate it during render. Storing it in state and updating it in an effect adds a render pass, a source of truth, and a chance for the two to disagree.

// Wrong: two renders, two sources of truth
const [total, setTotal] = useState(0);
useEffect(() => setTotal(items.reduce((s, i) => s + i.price, 0)), [items]);

// Right: one render, one source of truth
const total = items.reduce((sum, item) => sum + item.price, 0);

Mistake 2: stale closures

A callback registered once captures the values that existed at that moment. An interval created in an effect with an empty dependency array will forever see the first render's state — a bug that only appears once the value actually changes.

// Wrong: count is always 0 inside the interval
useEffect(() => {
  const id = setInterval(() => setCount(count + 1), 1000);
  return () => clearInterval(id);
}, []);

// Right: the updater form does not capture count
useEffect(() => {
  const id = setInterval(() => setCount((c) => c + 1), 1000);
  return () => clearInterval(id);
}, []);

Mistake 3: missing cleanup

• Event listeners on window or document that accumulate on every mount.
• Intervals and timeouts that keep firing after the component unmounts.
• WebSocket or EventSource connections left open, exhausting server connections.
• Observers (Intersection, Resize, Mutation) that keep references to detached nodes.
• In-flight requests whose responses set state on an unmounted component.

In a single-page app the cost compounds: navigate between two routes twenty times and you have twenty live listeners. Users report 'it gets slow after a while', which is the hardest kind of bug to reproduce in a five-minute QA pass.

Mistake 4: race conditions in data effects

Two in-flight requests can resolve out of order, leaving the UI showing results for a query the user has already changed.

useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/search?q=${query}`, { signal: controller.signal })
    .then((res) => res.json())
    .then(setResults)
    .catch((err) => { if (err.name !== "AbortError") setError(err); });
  return () => controller.abort();
}, [query]);

Mistakes 5 to 8: the rest of the list

1. 1Suppressing the exhaustive-deps lint rule instead of fixing the dependency. The rule is right far more often than the developer overriding it.
2. 2Conditional hooks — calling a hook inside an if or after an early return breaks the order React relies on and throws at runtime.
3. 3Recreating objects and functions as dependencies each render, so the effect runs every time. Move them outside, or wrap with useMemo/useCallback.
4. 4Reading layout in useEffect and then writing to it, causing a visible flash. Use useLayoutEffect for synchronous measurement before paint.