React useEffect Dependency Warning and Infinite Loops
Your React component throws 'missing dependency' warnings from ESLint, or useEffect runs infinitely despite specifying dependencies. Effects trigger too frequently, causing performance issues.
useEffect dependency issues occur when dependencies array is missing, incomplete, or contains objects that are recreated on every render.
Error Messages You Might See
Common Causes
- Missing dependencies array causing effect to run on every render
- Object or function dependency not memoized, causing different reference each render
- Dependency array doesn't include all used variables (ESLint warning)
- Infinite loop: effect updates dependency, triggering effect again
- Using stale closures, accessing old state from effect
How to Fix It
Always include dependencies array: useEffect(() => { ... }, [dep1, dep2]) prevents infinite loops.
Memoize dependencies: For objects/functions, use useMemo/useCallback:const user = useMemo(() => ({id: 1}), []);
useEffect(() => { ... }, [user])
Fix ESLint warnings: If warning says missing dependency, add it. If adding causes loop, memoize it first.
Handle stale state: For state updates in effects, use updater function: setCount(c => c + 1) instead of using count from closure.
Real developers can help you.
You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.
Get HelpFrequently Asked Questions
Why does empty dependencies array ([])?'
Empty array means 'run once on mount, never again'. Use for initialization. With no array, runs every render.
When should I memoize dependencies?
When dependency is object/function and its identity changes each render. Use useMemo/useCallback to keep same reference.
How do I fix infinite loop in useEffect?
1) Check that effect isn't updating its own dependency 2) Memoize object/function deps 3) Use updater functions for state