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

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop. This may be due to several reasons. 

  1. Changing the state in the main body of the component.
  2. Invoking an event handler, instead of passing as a function.

Let us discuss this in detail with example codes.

Changing the state in the main body of the component

Changing the state in the component body as in the below example will throw an error “Too many re-renders. React limits the number of renders to prevent an infinite loop”.

import { useState } from 'react';

function App() {
	const [name, setName] = useState("");
	
	setName("John"); // Throws React Error: Too many re-renders

	return (
	  <div>{name}</div>
	);
}

export default App;

The above code will throw an error because we are trying to change the name setName("John"); in the main body of the component. That means the function setName("John"); will be executed at the time of each component rendering. The function setName("John"); changes the value in the state name.

When a state was changed, the component will again be rendered. So, the function setName changes the state which leads to another re-render. This will go infinitely and throws the error.

This error was solved in the below example code by using useEffect hook. 

import { useState, useEffect } from 'react';

function App() {
	const [name, setName] = useState("");

	useEffect(()=>{
		setName("John");
	}, [])
	
	return (
	  <div>{name}</div>
	);
}

export default App;

 One possible solution is to use useEffect hook and put the function setName inside it. An empty array is given as a dependency for useEffect. So setName("John"); will only be executed at the time of initial rendering and not executed on re-rendering.

Invoking an event handler, instead of passing as a function

Let's take an example of the below code which throws React Error: Too many re-renders.

// This code throws Error: Too many re-renders

import { useState } from 'react';

function App() {
	const [count, setCount] = useState(0);
	return (
	  	<div>
			<label>Count: {count}</label>
			<button onClick={setCount(count + 1)}>Increment</button>
		</div>
	);
}

export default App;

In the above code, the error comes from inside the onClick event handler of the button.

<button onClick={setCount(count + 1)}>Increment</button>

At the time of the component initial rendering, setCount(count + 1) will be executed and it changes the state count which leads to component re-render. It will go an infinite loop.

To prevent this, we have to pass setCount as a callback function like  () => setCount(count + 1).

A full code example is given below.

import { useState } from 'react';

function App() {
	const [count, setCount] = useState(0);
	return (
	  	<div>
			<label>Count: {count}</label>
			<button onClick={() => setCount(count + 1)}>Increment</button>
		</div>
	);
}

export default App;

 

Conclusion

 The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens due to the state update in the main body of the component or invoking an event handler, instead of passing as a function.

Related Blogs

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.

Pass event and parameter onClick in React

How to pass event and parameter onClick in React

We set the inline arrow function (event) => clickHandler(event, "Hello World!") as props to the onClick event handler in the button. The arrow function takes the event as an argument and calls the clickHandler function.

Create a Back button with React Router

Create a Back button with React Router

To create a back button with React Router use useNavigate() hook. Call navigate function eg. navigate(-1); inside the onClick function of the back button.

Call multiple functions onClick in React

Call multiple functions onClick in React

To call multiple functions onClick in React, pass an event handler function into the onClick prop of the element that can call as many other functions as necessary.