How to solve too many re-renders error in ReactJS?
“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.
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.
Creating 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:
Project Structure: It will look like the following.
Filename- App.js: 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.js: Next, in the componentDidMount React lifecycle, I will add the React state, and update the state value.
Output: 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.
Filename- App.js: Use the shouldComponentUpdate hook when it is clear that at all times a component we are creating will be static.
Output: 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.