This post will help you approach the error: “Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops” as well as propose the best solutions to this common error in ReactJS. Let’s immerse into this article to accumulate your experiences so far.

When does the error: “Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops” occur?

The error happens when an element repeatedly calls “setState inside componentWillUpdate”. Supposing the case below, we are attempting to call the “handleClick” by the button’s onClick.

render() {
        return ( 
             .......
{<button onClick={this.handleClick()}>My Profile</button>}
             .......
    )}

When we call, the error appears; and display on the screen below

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. 

From this error above, we find out the key causes:

1. Clicking on the button when you are calling your “HandleClick”

In this situation, the error will appear and render many times.

2. Calling toggle inside the render method

When it comes to this case, it leads to rendering again, and the toggle might call continuously.

How to solve the error: “Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops”?

Solution 1: Implement the “Callback”

The “onClick” can be used in this solution.

{<button onClick={(e) => this.handleClick()}>My Profile</button>}

Besides, you add parameters below.

{<button onClick={(e) => this.handleClick(e)}>My Profile</button>}

After passing parameters, we ensure that this error can be tackled rapidly.

Solution 2: Transform “this.handleClick()” to “this.handleClick”

As for this circumstance, all you have to do is to change “this.handleClick()” to “this.handleClick“. Let’s look at it below.

{<button onClick={this.handleClick}>My Profile</button>}

As soon as transforming from “this.handleClick()” to “this.handleClick”, the error vanishes right away. In other words, your problem is solved completely. 

Solution 3: Call the method with “this”

There are double cases when you call the method. 

• If you call the method, please use this. 

onClick={this.your_method}

• If you call the method with parameter, please use this. 

onClick={this.your_method(your_param)}

Finally, run your program and this error is tackled completely. 

Conclusion

Solving the error in ReactJS: “Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops” is not as difficult as you think. Thanks for browsing all around this blog post.   

Read more:

→ Fixing “cannot read property setState of undefined in React.js” error