React error: Too many re-renders. Why am I getting these errors?

As a beginner learning to code, I should be familiar with encountering errors. However they are still extremely frustrating when I see the same error over and over again. With learning React, the most common error I see was:

What was I doing wrong here and why is this happening? Unlike other coding errors you might have encountered, this error is pretty clear and understandable. Because the component is re-rending too often, react puts a stop on the re-renders which will be in a form of the error message.

Here is a simple example where this error occurs:

function App() {
   const [count, setCount] = useState(0);

   setCount(count + 1)

   return (
      <div> Counter: {count}</div>
   );
}

SetCount is called immediately without any condition or event handler. Which causes the react component to re-render due to a change in state. From the re-render, setCount gets invoked again which causes the component to re-render again. If possible, this loop will continue indefinitely. Instead react will give you an error message telling you that an infinite loop has been created.

The solution to this problem is to simply include a conditional statement or event handler before calling the setter function.

function App() {
   const [count, setCount] = useState(0);

   function handleClick() {
       setCount(count + 1)
   }

   return (
      <>
         <div> Counter: {count} </div>
         <button onClick={handleClick}> Click Me! </button>
      </>
   );
}

Another common beginner's mistake is to call the event handler right away without meaning to. If the event handler changes state, this simple mistake will lead to our not so favorite "too many re-render" error.

function App() {
   const [count, setCount] = useState(0);

   return (
      <>
        <div> Counter: {count} </div>
        <button onClick={setCount(count + 1)}> Click Me! </button>
      </>
   );
}

The onClick function is called right away during the first load, instead of when the event is trigger. This cause state to change right away and then the component get re-renders and the cycle repeat on and on.

To solve this, a function need to be passed into the onClick event handler.

function App() {
   const [count, setCount] = useState(0);

   return (
    <>
      <div> Counter: {count} </div>
      <button onClick={()=> setCount(count + 1)}> Click Me! </button>
    </>
   );
}

Another example where you can commonly see this error is when you use the UseEffect hook and don't include a dependencies array.

function App() {
   const [count, setCount] = useState(0);

   useEffect(() => {
      setCount(count + 1)
   });

   return (
      <div> Counter: {count}</div>
   );
}

To better understand this, let's think about the sequence of events. The useEffect hook runs its callback function after the component is first rendered. Without any dependencies array, useEffect will continue to run the function every time the component gets re-render.

render -> useEffect -> setState -> re-render -> useEffect

Using the example above, the component first gets rendered, then useEffect changes the state which causes the component to be re-render. Which then causes UseEffect to get run again, which will change state again. And the cycle repeats until a familiar error shows up again.

To avoid this infinite re-rendering, the simplest solution is to add a dependencies array to limit the amount of time useEffect is called.

function App() {
   const [count, setCount] = useState(0);

   useEffect(() => {
      setCount(count + 1)
   }, []);   // <- empty dependencies array, will only run once

   return (
      <div> Counter: {count}</div>
   );
}

I hope this has helped in obtaining a better understanding of this common React error.

Source: https://bobbyhadz.com/blog/react-too-many-re-renders-react-limits-the-number