Understanding React Event Handling and Preventing Infinite Loops- Too many re-renders Error

React is a powerful JavaScript library that allows developers to create dynamic and interactive user interfaces. Part of its magic lies in event handling, where developers define how components respond to user interactions like clicks, keypresses, and more. However, when dealing with event handlers, especially with state updates, it's essential to be aware of the potential pitfalls that can lead to infinite loops and dreaded error messages like "Too many re-renders. React limits the number of renders to prevent an infinite loop."

In this article, we'll delve into two different ways of defining event handlers using the onClick prop in React components and understand why one of them can lead to infinite loops and how to prevent it.

onClick={setState(5)} - The Infinite Loop Trap

At first glance, the expression onClick={setState(5)} might appear to be a valid way to set the state to 5 when the component is clicked. However, it is a trap that can lead to an infinite loop of renders.

Why does this happen?

In the code onClick={setState(5)}, setState(5) is not a function reference; instead, it is a function call. This means that every time the component renders, setState(5) gets executed immediately. As a result, setting the state inside the rendering phase triggers a re-render, which leads to another call to setState(5) and then another re-render, and this cycle goes on indefinitely.

This infinite loop of renders triggers React's protection mechanism, and it throws an error message: "Too many re-renders. React limits the number of renders to prevent an infinite loop."

How can I test it?

<button onClick={console.log(5)}>Click me</button>  
// the above code snippet logs `5` as soon as this button is rendered

<button onClick={()=>console.log(5)}>Click me</button> 
// the above code snippet logs `5` as soon as this button is clicked

what is the solution?

To avoid the infinite loop trap, the recommended approach is to use an arrow function to wrap the state update, like onClick={() => setState(5)}.

In this syntax, we are passing an anonymous arrow function to the onClick prop. The actual setState(5) is called only when the button is clicked, not during the rendering phase. The arrow function acts as a callback that delays the state update until the button is clicked, ensuring that we don't fall into the infinite loop trap.