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.
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.
Contact Us