Loading...
Loading...
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.React detects that your component is triggering an infinite render loop — each render causes a state update, which causes another render, and so on. React stops this after a threshold to prevent the browser from freezing.
State updates must be in event handlers or useEffect, never directly in the component body.
// ❌ Infinite loop — setState in render body
function Counter() {
const [count, setCount] = useState(0);
setCount(count + 1); // 💥 runs on every render
return <div>{count}</div>;
}
// ✅ State update in event handler
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}Pass a function reference, not a function call.
// ❌ Calls handleClick immediately on every render
<button onClick={handleClick()}>Click</button>
// ✅ Passes the function reference
<button onClick={handleClick}>Click</button>
// ✅ Or use an arrow function wrapper
<button onClick={() => handleClick(id)}>Click</button>