performUpdateIfNecessary: Unexpected batch number

Question

inside of componentWillReceiveProps function I called another function:

componentWillReceiveProps(nextProps){

  if(nextProps.cart){
    var cart = nextProps.cart;
    this.setState({cart:cart,
      offCart:cartHelper.getOffCart(cart),
      totalPay:cartHelper.getTotalPayCart(cart)});

      this.useFinance()//at this line makes this error

  }

  useFinance(){

    if(this.state.useFinance)
    {
      this.setState({useFinance:false})
    }else{
      if(this.state.totalPay > this.state.user.user.finance)
      {
        this.setState({useFinance:false})
      }else{
        this.setState({useFinance:true})
      }
    }

  }

I'm using react-redux and I should call useFinance function When the cart is updated.

I got this error message:

warning.js?8a56:33 Warning: performUpdateIfNecessary: Unexpected batch number (current 2, pending 1)

Answer 1

Do not call setState every time in componentWillReceiveProps if value is still same. Check value which receives from nextprops and actual value inside the state if they are not equal then call setState.

componentWillReceiveProps(nextProps) {

    if (nextProps.cart && nextProps.cart != this.props.cart) { //Do this in case of object => JSON.stringify(nextProps.cart) != JSON.stringify(this.props.cart)
        var cart = nextProps.cart;
        this.setState({
            cart: cart,
            offCart: cartHelper.getOffCart(cart),
            totalPay: cartHelper.getTotalPayCart(cart)
        });
        this.useFinance() //at this line makes this error

    }
}

useFinance() {

    if (this.state.useFinance) {
        this.setState({
            useFinance: false
        })
    } else {
        if (!(this.state.totalPay > this.state.user.user.finance)) {
            this.setState({
                useFinance: true
            })
        } 
    }

}