useEffect Dependency Array Mistakes That Cause Infinite Loops

useEffect Dependency Array Mistakes That Cause Infinite Loops

The dependency array is the most error-prone part of useEffect. Here are the common mistakes and how to fix each.

Forgetting the Array

Without a dependency array, the effect runs after every render. If the effect sets state, it triggers another render, which runs the effect again, creating an infinite loop.

Including State You Update

If you set a state variable inside the effect and also include it in the dependency array, every update triggers another run, causing a loop.

Missing Dependencies

If you use a value inside the effect but do not include it, the effect uses a stale version of that value. This causes bugs that are hard to trace because the effect does not react to changes.

Objects and Functions as Dependencies

If you create a new object or function on every render and include it in the array, the effect runs on every render because the reference changes each time.

Using the Wrong Array

Sometimes you want the effect to run only on mount, but you include a value that changes, so it runs too often. Use an empty array when you truly mean mount-only.

The Fix

Include every value the effect uses that can change. Use an empty array for mount-only. For objects and functions, memoize them with useMemo and useCallback, or move them inside the effect.

The Safety Net

Enable eslint-plugin-react-hooks. It warns you about missing dependencies and helps you get the array right automatically.

The Takeaway

Most useEffect bugs come from a wrong dependency array: forgetting it, including state you update, missing dependencies, or using new references each render. Get the array right and most hook bugs disappear.