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.
- Changing the state in the main body of the component.
- Invoking an event handler, instead of passing as a function.
Let us discuss this in detail with some examples.
Changing the state in the main body of the component
Changing the state in the component body will cause an error “Too many re-renders. React limits the number of renders to prevent an infinite loop”. Let us take the below example.
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;
In the above code, 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.
One possible solution is to use useEffect hook and call setName()
inside it. For a better understanding, please look into the below code.
import { useState, useEffect } from 'react';
function App() {
const [name, setName] = useState("");
useEffect(()=>{
setName("John");
}, [])
return (
<div>{name}</div>
);
}
export default App;
We used useEffect
hook and put the function setName()
inside it. Also, we given an empty array is given as a dependency for useEffect
. So setName("John");
will only be executed at the time of initial rendering and it will not be executed on component re-rendering.
Invoking an event handler, instead of passing as a function
Invoking an event handler instead of passing as a function will throw a React error: Too many re-renders.
Let's take the below example of passing an onClick event handler function to a button.
// 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>
We passed the event handler as a function setCount(count + 1)
instead of a callback function () => setCount(count + 1)
.
When we pass it as a function like setCount(count + 1)
, It will be executed at the time of the component's initial rendering instead of the button click. This will change the state count which leads to component re-render and it will go an infinite loop.
To prevent this error, we have to pass setCount
as a callback function like () => setCount(count + 1)
.
Please look into the below code for a solution.
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;
Here we set an event handler as onClick={() => setCount(count + 1)}
. Thus the error was solved.
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. To solve the error, use useEffect hook and put state changes inside it. If you are working with an event handler, use a callback function instead of passing it as a function.
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
React Hook is Called Conditionally
Get the current route using React Router
How to check internet connection(online or offline) in React
Call multiple functions onClick in React
Warning: The tag is unrecognized in this browser
How to use Profiler API in React to measure render performance
The style prop expects a mapping from style properties to values, not a string
Create a Back button with React Router
Explore All Blogs