I have error maximum call stack size exceeded. Maybe I in wrong way understand ponentDidUpdate, but shouldn't it's run one time, instead 1000. How fix it?

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      amount: 0
    }
  }

  updateAmout() {
    let number = 0;
    this.propsments.map((ment, index) => {

      if (ment.replyTo === null) {

        number += 1;
        this.setState({amount: number});
      }
      return null;
    });
  }

  ponentWillMount() {
    this.updateAmout();
  }

  ponentDidUpdate() {
    this.updateAmout();
  }

  render() {
    console.log(this.state.amount);
    return (
      <div className="ments-container">
        <div id="ments">
          <AddComment />
          <div className="ments-flow">
            <div className="ments-header">
              <div className="pull-right">
                <a href="" className="text-muted">Best</a> |
                <a href="" className="active">Newest</a> |
                <a href="" className="text-muted">Oldest</a>
              </div>
              <b>6 Comments</b>
            </div>
            <RenderComments />
          </div>
          <button className="btn btn-block">More...</button>
        </div>
      </div>

    ) // return
  } // render
} // App

I have error maximum call stack size exceeded. Maybe I in wrong way understand ponentDidUpdate, but shouldn't it's run one time, instead 1000. How fix it?

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      amount: 0
    }
  }

  updateAmout() {
    let number = 0;
    this.props.ments.map((ment, index) => {

      if (ment.replyTo === null) {

        number += 1;
        this.setState({amount: number});
      }
      return null;
    });
  }

  ponentWillMount() {
    this.updateAmout();
  }

  ponentDidUpdate() {
    this.updateAmout();
  }

  render() {
    console.log(this.state.amount);
    return (
      <div className="ments-container">
        <div id="ments">
          <AddComment />
          <div className="ments-flow">
            <div className="ments-header">
              <div className="pull-right">
                <a href="" className="text-muted">Best</a> |
                <a href="" className="active">Newest</a> |
                <a href="" className="text-muted">Oldest</a>
              </div>
              <b>6 Comments</b>
            </div>
            <RenderComments />
          </div>
          <button className="btn btn-block">More...</button>
        </div>
      </div>

    ) // return
  } // render
} // App

• javascript
• reactjs
• redux
• react-redux

• 1 ponentWillMount will force an update which will trigger ponentDidUpdate which will force again an update and so on. – MinusFour Commented Jul 10, 2017 at 22:17
• 1 ponentDidUpdate() is a callback to notify you that the state update was finished successfully. You should not trigger another state update here. – Code-Apprentice Commented Jul 10, 2017 at 22:45

2 Answers 2

Each time you modify state in ponentDidUpdate, a re-render is thrown asynchronously. In your method updateAmount, you are modifying the state. And you are calling that method in ponentDidUpdate, so you initiate an infinite loop of re-renders, so this endless loop created finally wastes the javascript memory.

The React cycle when updating the state is the following one. So you can easily understand why you enter into an endless loop.

I found the answer to my question. I need to use the nextProps argument and the method ponentWillUpdate instead of the ponentDidUpdate method.

// before
ponentDidUpdate() {
 this.updateAmout();
}

// after
ponentWillUpdate(nextProps) {
  if (!_.isEqual(this.props, nextProps)) {
    this.updateAmout();
  }
}