Loading...
Loading...
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.This error occurs when a component updates its state inside the render phase or inside a useEffect/useLayoutEffect without proper dependencies, causing an infinite loop of re-renders. React stops this to prevent the browser from crashing.
Pass a function reference or an arrow function, don't call it immediately.
// ❌ Wrong (calls immediately on render)
<button onClick={handleClick()}>Click me</button>
// ✅ Correct (passes function reference)
<button onClick={handleClick}>Click me</button>
// ✅ Correct (arrow function for passing args)
<button onClick={() => handleClick(id)}>Click me</button>Ensure you aren't setting state in a way that triggers the effect again immediately.
// ❌ Infinite loop
useEffect(() => {
setCount(count + 1);
}, [count]); // 'count' changes -> effect runs -> 'count' changes...
// ✅ Fix with functional update or condition
useEffect(() => {
const timer = setInterval(() => {
setCount(c => c + 1);
}, 1000);
return () => clearInterval(timer);
}, []); // Empty dependency arrayFix this error faster with our free tool