React componentsDidUpdate与SetState回调

Question

If I run this code I get infinite loop in componentDidMount , adding if statement in (prevState !== this.state) doesn't help neither.

state = {
    purchaseable: false,
    totalPrice: 0
  }

  updatePurchaseState = () => ({
      purchaseable: true
    });

  addIngredientHandler = (type) => {
    const newPrice = totalPrice + 1
    this.setState({
      totalPrice: newPrice
    });
  }

  componentDidUpdate (prevProps, prevState) {
    this.updatePurchaseState()
  }

But if I execute updatePurchaseState in setState callback everything works fine:

addIngredientHandler = () => {
    let newPrice = newPrice +1
    this.setState(() => ({
      totalPrice: newPrice
    }), () => this.updatePurchaseState());
  }

According to React documentation https://reactjs.org/docs/react-component.html#setstate componentDidUpdate is preferable way to execute updatePurchaseState .

Why componentDidUpdate runs into infinite loop but setState callback doesn't if both update state and should re-render? What is the best approach for calling updatePurchaseState ?

Answer 1

Every time you update your component's state or props, the component will re-render and invoke componentDidUpdate . So both functions addIngredientHandler and updatePurchaseState will trigger componentDidUpdate to be called. In componentDidUpdate you try to call updatePurchaseState again, causing an infinite loop.

The way to do it correctly is that in componentDidUpdate , you have to check if updatePurchaseState should be called or not, by comparing current state with previous state:

  componentDidUpdate (prevProps, prevState) {
    if (this.state.purchaseable !== prevState.purchaseable) {
      this.updatePurchaseState()
    }
  }

Please read the official document of React for more details