React Hooks: 7 Mistakes That Cause Bugs (and How to Fix Them)

Most React Hooks tutorials teach you the syntax. They show you that useState returns an array, that useEffect runs after render, that useRef holds a value. None of them prepare you for the bugs you'll actually hit in production.

This post walks through seven real mistakes every React developer makes — stale closures, infinite loops, mutation bugs, the Rules of Hooks violations. Each one comes with broken code, an explanation of why it breaks, and the fix.

If you're already comfortable with the basic syntax, this is the post that turns "I can write hooks" into "I understand hooks". If you're new, bookmark this for the day a bug stares back at you.

Quick Answer

Most React Hook bugs come from one of three causes: stale closures (functions remembering old state), reference instability (new objects on every render breaking effects and memoization), or mutation (changing state without telling React). Master these three and 90% of hook bugs disappear.

Mistake 1: Stale Closure in useEffect

You set up an interval to log the count every second. The count updates on screen. But the console keeps logging 0. What's happening?

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      console.log(count);  // always logs 0
    }, 1000);
    return () => clearInterval(id);
  }, []);  // empty deps - effect runs once

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

useEffect(() => {
  const id = setInterval(() => {
    setCount(c => c + 1);  // gets fresh value from React
  }, 1000);
  return () => clearInterval(id);
}, []);

Or, if you actually need to read the latest count inside the effect (not just update it), include it in dependencies — but be aware the interval will be torn down and recreated each second.

Mistake 2: Missing Dependency = Stale Data or Infinite Loop

You fetch user data when the user ID changes. But it only fetches the first user — switching to another user shows nothing.

function UserCard({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(setUser);
  }, []);  // missing userId in deps

  return user ? <p>{user.name}</p> : <p>Loading...</p>;
}

useEffect(() => {
  fetch(`/api/users/${userId}`)
    .then(r => r.json())
    .then(setUser);
}, [userId]);  // re-run when userId changes

The opposite mistake — listing too many dependencies — causes infinite loops (covered in Mistake 6). The ESLint rule react-hooks/exhaustive-deps catches both. Keep it on.

Mistake 3: Mutating State Directly

You add an item to a list. The state "changes" but the UI doesn't update.

function TodoList() {
  const [todos, setTodos] = useState(['Learn React']);

  const addTodo = (text) => {
    todos.push(text);   // mutates the same array
    setTodos(todos);    // React sees the same reference, skips re-render
  };

  return (
    <ul>{todos.map(t => <li key={t}>{t}</li>)}</ul>
  );
}

const addTodo = (text) => {
  setTodos([...todos, text]);  // new array, new reference
};

// Or with the functional form:
const addTodo = (text) => {
  setTodos(prev => [...prev, text]);
};

Same rule for objects: setUser({ ...user, name: 'New' }), never user.name = 'New'; setUser(user).

Mistake 4: Using State for Derived Values

You store the user's full name as state, recalculating it whenever first or last name changes. Bugs follow.

function Profile({ first, last }) {
  const [fullName, setFullName] = useState(first + ' ' + last);

  useEffect(() => {
    setFullName(first + ' ' + last);  // sync derived state
  }, [first, last]);

  return <h2>{fullName}</h2>;
}

function Profile({ first, last }) {
  const fullName = first + ' ' + last;  // just compute it
  return <h2>{fullName}</h2>;
}

If the computation is expensive, wrap it in useMemo. But for cheap calculations (string concatenation, simple math, basic filtering), just compute during render. Less state means fewer bugs.

Mistake 5: Calling Hooks Conditionally

You only need a debounced value when search is enabled. So you only call the hook when needed... and React explodes.

function Search({ enabled, query }) {
  if (enabled) {
    const debounced = useDebounce(query, 300);  // hook inside if!
    return <Results query={debounced} />;
  }
  return null;
}

function Search({ enabled, query }) {
  const debounced = useDebounce(query, 300);  // always call
  if (!enabled) return null;
  return <Results query={debounced} />;
}

The Rules of Hooks: always call hooks at the top level of your function, in the same order, on every render. The condition goes after the hook, not around it.

Mistake 6: Object/Function in Dependency Array (Infinite Loop)

You pass an options object to a custom hook. Suddenly your effect runs in a loop, your network tab fills with requests, and your laptop fan kicks on.

function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData({ limit: 10, sort: 'asc' }).then(setData);
  }, [{ limit: 10, sort: 'asc' }]);  // new object every render!
}

// Option A: list primitives instead
useEffect(() => {
  fetchData({ limit, sort }).then(setData);
}, [limit, sort]);

// Option B: memoize the object once
const opts = useMemo(() => ({ limit: 10, sort: 'asc' }), []);
useEffect(() => {
  fetchData(opts).then(setData);
}, [opts]);

Same problem with functions: a new function reference on every render breaks useEffect, useCallback, and useMemo. Wrap functions you pass as dependencies in useCallback.

Mistake 7: Using useRef When You Need useState (or Vice Versa)

You want to track a value across renders. Should it be useState or useRef? Confusing the two creates UI that doesn't update or unnecessary re-renders.

function Likes() {
  const count = useRef(0);

  return (
    <button onClick={() => count.current++}>
      Likes: {count.current}  {/* never updates! */}
    </button>
  );
}

function Form() {
  const [timer, setTimer] = useState(null);

  const handleSubmit = () => {
    setTimer(setTimeout(saveDraft, 1000));  // wastes a render
  };
  // ...
}

useState  →  the value is shown in the UI (re-render needed)
useRef    →  the value persists but the UI doesn't depend on it

Examples of useRef: DOM element references, timer IDs, previous values, mutable counters that aren't displayed, scroll positions you only check inside event handlers.

Frequently Asked Questions

Related Reading

The Bottom Line

React Hooks are a tiny API but a deep mental model. The bugs above all come from forgetting one of three things: functions can capture stale state, references matter for dependencies, and React doesn't re-render unless you give it a new reference.

Once these click, hooks stop feeling magical and start feeling boring — in the best way. You'll predict bugs before you write them, read others' code faster, and stop reaching for useEffect when a plain calculation will do.

The official React docs at react.dev are the best deep reference. The bugs in this post are what most people learn the hard way. Now you've got a head start.