[Solved] Maximum update depth exceeded. This can happen when a component repeatedly calls

Today I am trying to call my handleClick in my button’s onClick but I am facing the following 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 in ReactJS. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Lets Get Start with This Article.

How Maximum update depth exceeded. This can happen when a component repeatedly calls Error Occurs?

I am trying to call my handleClick in my button’s onClick but I am facing the following 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.

Here is my Code.

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

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve Maximum update depth exceeded. This can happen when a component repeatedly calls Error?

Solution 1: change this.handleClick() to this.handleClick

Here this error occurs Because of you are calling your HandleClick in the render and when you click on the button it will re-render again and again that’s why this error occurs. You just need to change this.handleClick() to this.handleClick. Just like this.

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

And Now, Your error must be resolved. Thanks.

Solution 2: Use callback

You can also use onClick this way.

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

Also, You can Pass parameters just like this.

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

Now, Your error must be solved. Thank you.

Solution 3: Use this

If you want to call the method with param then use this.

onClick={this.your_method(your_param)}

If Just want to call the method then use this.

onClick={this.your_method}

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-from
• VS Code ‘!’ or exclamation mark HTML autocomplete not working
• Functions are not valid as a React child. This may happen if you return a Component instead of Component from render
• How to upgrade react to the latest version?
• Objects are not valid as a React child