close

[Solved] Maximum update depth exceeded in ReactJS

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Maximum update depth exceeded in ReactJS. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How To Solve Maximum update depth exceeded in ReactJS Error ?

  1. How To Solve Maximum update depth exceeded in ReactJS Error?

    To Solve Maximum update depth exceeded in ReactJS Error This problem usually occurs when toggle inside the render method which will cause to re-render and toggle will call again and re-rendering again and so on so all you need to make onClick refer to this.toggle not calling it to fix the issue do this

  2. Maximum update depth exceeded in ReactJS

    To Solve Maximum update depth exceeded in ReactJS Error This problem usually occurs when toggle inside the render method which will cause to re-render and toggle will call again and re-rendering again and so on so all you need to make onClick refer to this.toggle not calling it to fix the issue do this

Solution 1

This problem usually occurs when toggle inside the render method which will cause to re-render and toggle will call again and re-rendering again and so on

this line at your code

{<td><span onClick={this.toggle()}>Details</span></td>}

you need to make onClick refer to this.toggle not calling it to fix the issue do this

{<td><span onClick={this.toggle}>Details</span></td>}

Solution 2

You should pass the event object when calling the function :

{<td><span onClick={(e) => this.toggle(e)}>Details</span></td>}

If you don’t need to handle onClick event you can also type :

{<td><span onClick={(e) => this.toggle()}>Details</span></td>}

Now you can also add your parameters within the function.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment