React error 'Too many re-renders. React limits the number of renders to prevent an infinite loop.' How do I find and fix the cause?

Cause: React throws this when a component keeps updating state while it is rendering, so the render triggers a state update, which triggers another render, forever. The most common cause is calling a handler instead of passing it: onClick={handleClick()} runs handleClick during render, and if it calls a setter you get a loop. Fix (best first): 1. Check event props. Change onClick={handleClick()} to onClick={handleClick}, or to onClick={() => handleClick(id)} when you need to pass arguments. The same applies to onChange, onSubmit and similar props. 2. Look for a setState call written directly in the component body, such as setCount(count + 1) at the top level. Move it into an event handler, or into useEffect with a correct dependency array if it must react to a change. 3. In useEffect, make sure the effect does not set state that is also in its dependency array without a guard, and do not create a new object or array each render and use it as a dependency. 4. If you intentionally derive state from props during rendering (a rare pattern), the set call must be inside a condition that becomes false after the update, for example comparing against the previously stored value. Prefer computing the value during render, or using a key to reset state. 5. If you cannot spot it, open the error in the browser console, expand the stack, and look for the set function call named in it. Verify: the component renders once, the error no longer appears, and the state changes only when the user event or intended effect fires. Sources: https://react.dev/reference/react/useState https://react.dev/learn/responding-to-events