ReactJS: Maximum Update Depth Exceeded

Question

I am trying to switch the state of a component in ReactJS, but I am getting an 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 endless loops.

I don't see an infinite loop in my code, can anyone help?

ReactJS Component Code:

import React, { Component } from 'react'; import styled from 'styled-components'; class Item extends React.Component { constructor(props) { super(props); this.toggle= this.toggle.bind(this); this.state = { details: false } } toggle(){ const currentState = this.state.details; this.setState({ details: !currentState }); } render() { return ( <tr className="Item"> <td>{this.props.config.server}</td> <td>{this.props.config.verbose}</td> <td>{this.props.config.type}</td> <td className={this.state.details ? "visible" : "hidden"}>PLACEHOLDER MORE INFO</td> {<td><span onClick={this.toggle()}>Details</span></td>} </tr> )} } export default Item; 

Answer 1

because you cause the switch inside the rendering method, which will cause the re-render and switch, will cause the re-render again, etc.

this line in your code

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

you need to make onClick link to this.toggle without calling it

before fix the problem does it

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

Answer 2

You must pass the event object when calling the function:

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

If you do not need to handle the onClick event, you can also type:

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

Now you can also add your parameters to the function.

Answer 3

Forget about the reaction first:
This is not related to the reaction and allows us to understand the basic concepts of Java Script. For example, you wrote the following function in a Java script (name A).

 function a() { }; 

Q.1) How to call the function that we defined?
Answer: a ();

Q.2) How to pass a link to a function so that we can call it later?
Answer: let the fun = a;

Now, going to your question, you used paranthesis with the name of the function, which means that the function will be called when the following statement is executed.

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

Then how to fix it?
Just!! Just remove the brackets. So you gave a link to this function to the onClick event. It will only call your function when you click on your component.

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

One proposal has been issued to react:
Avoid using the built-in feature suggested by someone in the answers, this can lead to poor performance. Avoid the following code, it will instantiate the same function again and again each time the function is called (the lamda statement creates a new instance each time).
Note: and there is no need to explicitly pass event (e) to the function. You can access it in a function without passing it.

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

https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

Answer 4

if you don’t need to pass arguments to the function, just remove () from the function as shown below:

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

but if you want to pass arguments, you have to do as below:

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

Answer 5

ReactJS: error exceeding maximum update depth

 inputDigit(digit){ this.setState({ displayValue: String(digit) }) <button type="button"onClick={this.inputDigit(0)}> 

Why is that?

 <button type="button"onClick={() => this.inputDigit(1)}>1</button> 

The onDigit function sets a state that causes re-rendering, which causes onDigit to fire, because it is the value that you set as onClick, which forces the state to be set, which causes re-rendering, which causes onDigit, because it is the value that you ... Etc

Answer 6

just change onClick = {this.something} to onClick = {() => this.something}

Answer 7

it's bad {Details} it's good {this.toggle ()}> Details}

Answer 8

onClick You must call a function that triggers a switch of your function.

onClick={() => this.toggle()}