Lovable
ui
React Hook Dependency Warning - Stale Closures
ESLint shows 'missing dependency in useEffect' or 'exhaustive-deps' warning. Code works but warning suggests adding dependencies. Adding dependencies causes infinite loops. Stale closures reference old values.
React hooks require explicit dependency arrays to track when effects should re-run. Missing dependencies cause stale closures; extra ones cause infinite loops.
Error Messages You Might See
React Hook useEffect has a missing dependency
Exhaustive-deps
Stale closure
Common Causes
- Variable used in effect but not in dependencies array
- Function reference changes every render
- Object/array in dependencies (equality always false)
- Suppressing warning with eslint-disable instead of fixing
- Not understanding effect lifecycle
How to Fix It
Add all dependencies:
const [count, setCount] = useState(0);
useEffect(() => {
console.log(count); // use count
}, [count]); // add to depsMemoize dependencies to prevent re-creates:
const config = useMemo(() => ({ value: 10 }), []);
useEffect(() => {
console.log(config.value);
}, [config]);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 Help