Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Educational use only. Content explains errors and defensive fixes for systems you own or are authorised to test. Do not use any technique here to access data, accounts, or networks without permission.

Root Cause

This error is notoriously common in React applications, particularly when using the `useEffect` hook or event handlers. It happens when a component's state is updated during the render phase itself, causing React to immediately re-render the component. The re-render triggers the state update again, creating an infinite loop. This most frequently occurs when a state setter function is called directly within the component body instead of inside a `useEffect` or an event callback. Another common culprit is a `useEffect` hook that updates a state variable which is also listed in its dependency array, without a proper conditional check to stop the cycle once the desired state is reached.

Fix / Solution

Ensure that state updates only happen in response to events (like clicks) or side effects (inside `useEffect`). If you must update state based on a prop change during render, wrap it in a `useEffect`. If the loop is caused by `useEffect` dependencies, check if the state being updated is unnecessarily included in the dependency array, or add a condition to only update the state when truly needed.

Code Snippet

// ❌ Broken — updates state during render
function BadCounter() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // Triggers infinite loop
  return <div>{count}</div>;
}

// ✅ Fixed — state update is inside a `useEffect`
function GoodCounter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(prev => prev + 1);
  }, []); // Empty dependency array prevents loops
  return <div>{count}</div>;
}