7 useEffect Mistakes Every React Developer Makes and How to Fix Them

useEffect is not a lifecycle method. It is a synchronization mechanism. Here are 7 common mistakes.

Mistake 1: Infinite Loop

// BAD — updates state on every render, triggering re-render
useEffect(() => {
  setCount(count + 1);
}); // missing dependency array!

// FIX — add dependency array useEffect(() => { setCount(c => c + 1); }, []); // runs once ```

Mistake 2: Object and Array Dependencies

New objects created every render trigger the effect every time. Use primitive values or useMemo.

Mistake 3: Not Cleaning Up

useEffect(() => {
  const ws = new WebSocket(url);
  return () => ws.close(); // cleanup on unmount
}, [url]);

Mistake 4: Race Conditions in Data Fetching

useEffect(() => {
  let cancelled = false;
  fetchData(id).then(data => {
    if (!cancelled) setData(data);
  });
  return () => { cancelled = true; };
}, [id]);

Mistake 5: Using useEffect for Derived State

Do not sync state with useEffect. Just calculate derived values directly in render.

Mistake 6: Fetching Data in useEffect in 2026

Use server components, React Query, or SWR instead of raw useEffect for data fetching.

Mistake 7: Too Many Dependencies

If your dependency array has 5 plus items, your effect is doing too much. Split it.

Avoid these mistakes in production. See our development services.