CODEWITHSUNDEEP
javascriptreactjs
dorkycam
dorkycam

Reputation: 529

React: Maximum update depth exceeded

I am getting this error when I run my code.

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.

And here's the code . it's referencing.

  69 | }
  70 | 
  71 | addQuestion = () => {
> 72 |   this.setState({numQuestions: this.state.numQuestions + 1});
  73 |  }
  74 | 
  75 | render() {

  131 | <div className="field">
  132 |     <div className="endButtons">
  133 |       <button id="addQuestionButton"
> 134 |         onClick={this.addQuestion()}>Add Question</button>
  135 |       <input
  136 |         type="submit"
  137 |         value="Submit"

   5 | import App from './App';
   6 | import registerServiceWorker from './registerServiceWorker';
   7 | 
>  8 | ReactDOM.render(<App />, document.getElementById('root'));
   9 | registerServiceWorker();
  10 | 
  11 |

I set my stuff up the way the articles on the actual React site said to and it "came" with this neat console type thing, that's where I came up with the above code. I'm very new to React, JSX, and Javascript (and just programing in general) and I don't really understand what this means so if you could also explain a little that would be awesome.

Thanks!

Upvotes: 11

Views: 30866

Answers (5)

ABC
ABC

Reputation: 212

You need to bind in the constructor.

bind set: this.delta = this.delta.bind(this)

Upvotes: 0

Romeo
Romeo

Reputation: 788

this.addQuestion() invoked every time the component re-renders, thus causing a loop.

Change the method this.addQuestion() to () => this.addQuestion()

<button id="addQuestionButton" onClick={() => this.addQuestion()}>Add Question</button>

Upvotes: 4

Santosh Panda
Santosh Panda

Reputation: 1

Your function this.addQuestion call at render time but as per your requirement it should call on while button onClick.

try this...

<button id="addQuestionButton" onClick={this.addQuestion}>Add Question</button>

Upvotes: -1

Tholle
Tholle

Reputation: 112787

You are calling this.addQuestion in your render method, which in turn calls setState which will result in a new render, and the indefinite loop continues.

You want to give onClick a function reference, not call it directly.

<button id="addQuestionButton" onClick={this.addQuestion}>Add Question</button>

Upvotes: 15

Chris
Chris

Reputation: 59491

The printed error message is quite self-explanatory. When you start your app, the this.addQuestion() is invoked directly, which triggers a re-render. The re-render will then invoke the same function again, and the loop continues until React has enough of it.

Just like @Tholle said in his answer, simply give it the reference to the function you want. Don't invoke it.

Also, whenever you are setting a state variable whose value depends on the previous state, it is recommended to pass a callback function to setState() rather than an object. So instead do:

this.setState(prevState => ({numQuestions: prevState.numQuestions + 1}));

This is irrelevant from the error you are getting, but still something I would advise you to do.

Upvotes: 0

Related Questions