应该组件更新中的突变状态反应16.6.3

Question

Since react have deprecated many of their Lifecycle Methods I found that, when using redux and connect when I want to augment local state of a component I am using componentDidUpdate . The problem is only prevProps, prevState are passed to this function.

That then means I only have nextProps, nextState inside the shouldComponentUpdate lifeCycle`.

To me this feels inherently wrong to do something as follows:

  shouldComponentUpdate(nextProps) {
    const { status_status } = nextProps;
    if(status_status === "error") {
      this.props.dispatch(resetStatus());
    }
    return true;
  }

This is surely an antiPattern and I should not be doing this.

How can I then get the nextProps without using shouldComponentUpdate

Answer 1

I was having similar case and I had found getDerivedStateFromProps useful and suitable in such condition.

static getDerivedStateFromProps(props, state) {
  // now, you may dispatch checking the condition
  // BTW, you will dispatch just using props
  // props.dispatch()
  // this.props.dispatch() // invalid
}

I know this note from the docs :

If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.

But I am just sharing my experience that was only the case getDerivedStateFromProps working.

However, I would also suggest you to use componentDidUpdate hook first. And if everything seems good for you, then stick with it. Or if you also face using componentDidUpdate and feel alright using getDerivedStateFromProps then you may post your opinion and ideas as an answer.