Lovable
ui
Infinite Loop Caused by Missing Dependency
Browser becomes unresponsive. useEffect runs infinitely, making thousands of API calls. Network tab shows repeated requests. Browser memory increases until crash.
Infinite loops occur when dependency array is missing or incorrect, causing effect to run on every render, which updates state, causing re-render, repeating infinitely.
Common Causes
- Missing dependency array (effect runs every render)
- Empty dependency array but accessing changing state
- Object/array in dependencies causing it to always change
- Function called in effect that updates state
- Not understanding closure and stale values
How to Fix It
Always include dependency array:
// Bad - no deps, runs every render
useEffect(() => {
fetchData(); // calls API every render
});
// Good - runs once on mount
useEffect(() => {
fetchData();
}, []);
// Good - runs when id changes
useEffect(() => {
fetchData(id);
}, [id]);Use ESLint plugin to catch missing dependencies.
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