“Too many re-renderers” is a React error that happens after you have reached an infinite render loop, typically caused by code that in a useEffect hook or the main body of the component itself unconditionally calls state setters.
Prerequisites:
When does React decide to re-render a component ?
- The first rendering will be triggered after the componentWillMount lifecycle.
- After the React ComponentWillUpdate lifecycle, it is then activated.
- After mounting a React component, it will listen to any React props or state that has changed.
- It will, by default, re-render the entire React component and its child components when it detects something has changed.
These are some tips to avoid too many re-renders errors in React:
- Don’t change the state in the main body of the component.
- Use the useEffect hook very cautiously. The second parameter of useEffect is an array of states based on the useEffect will call. So don’t update those states in useEffect otherwise, it will rerender the component again and again.
- Use React shouldComponentUpdate: React shouldComponentUpdate is a method for optimizing performance, which tells React to stop re-rendering a component, even though it might have changed the state or prop values. Using this approach only if a part stays unchanged or pure while it is used. You are expected to return a Boolean value with the React shouldComponentUpdate method. Return true if it needs to re-render or false to avoid being re-render.
Steps To Create React Application :
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure:
Example 1: Below is an example of how to use React shouldComponentUpdate. I’ve built 2 components of React in this code. One is a part of the greeting, and the other is the app component. During the render lifecycle, each React component is a console logging a message.
// Filename- App.jsimport React from "react";
class Greeting extends React.Component { render() {
console.log("Greeting - Render lifecycle");
return <h1>Geeksforgeeks</h1>;
}
}class App extends React.Component { render() {
console.log("App - Render lifecycle");
return <Greeting />;
}
}export default App;
|
Step to run the application: Open the terminal and type the following command.
npm start
Output: Open the browser and our project is shown in the URL http://localhost:3000/
Example 2: Next, in the componentDidMount React lifecycle, I will add the React state, and update the state value.
// Filename- App.jsimport React from "react";
class Greeting extends React.Component { render() {
console.log("Greeting - Render lifecycle");
return <h1>Geeksforgeeks</h1>;
}
}class App extends React.Component { state = {
greeted: false,
};
componentDidMount() {
this.setState({ greeted: true });
}
render() {
console.log("App - Render lifecycle");
return <Greeting />;
}
}export default App;
|
Step to run the application: Open the terminal and type the following command.
npm start
Output: Open the browser and our project is shown in the URL http://localhost:3000/. You can see in the output that the render lifecycle was triggered more than once on both the app and greeting components. This is because the React app component was re-rendered, after updating the state values, and its child components were also re-rendered. We should assume that the greeting portion is unchanged and that it won’t ever change.
Example 3: Use the shouldComponentUpdate hook when it is clear that at all times a component we are creating will be static.
// Filename - App.jsimport React from "react";
class Greeting extends React.Component { shouldComponentUpdate() {
console.log("Greeting - shouldComponentUpdate lifecycle");
return false;
}
render() {
console.log("Greeting - Render lifecycle");
return <h1>Geeksforgeeks</h1>;
}
}class App extends React.Component { state = {
greeted: false,
};
componentDidMount() {
this.setState({ greeted: true });
}
render() {
console.log("App - Render lifecycle");
return <Greeting />;
}
}export default App;
|
Step to run the application: Open the terminal and type the following command.
npm start
Output: Open the browser and our project is shown in the URL http://localhost:3000/. You can see that the app and greeting component went through a round of the rendering lifecycle. After the state values were changed, the App component went through the rendering lifecycle again. But the Greeting component did not console log the Lifecycle Render message.