Connected components cannot use new 16.3 lifecycles

I know that there is still much consideration going into https://github.com/reactjs/react-redux/issues/890 so I don’t mean to rush, but I thought you might be interested to know:

It looks like React 16.3 exposes the new lifecycles in a way that disallow for using the old componentWill* at the same time as new lifecycles.

Something that looks roughly like this:

class Form extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {initialized: false};
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.data && !prevState.initialized) {
      return {initialized: true};
    }
    return null;
  }
  render() {
    return this.state.initialized ? "initialized" : "uninitialized"
  }
}
export default connect()(Form);

will get this warning:

which I didn’t understand until I saw that the implementation details of connect use inheritance to add those lifecycles.

My workaround in this first case I found in my code is pretty easy to fix (I was just using the connect to get a dispatch method) but I bet people are going to start running into this as they upgrade to 16.3.

Sending my best to your efforts in https://github.com/reactjs/react-redux/issues/890 !

[timdorr]

@vctormb cDU is the recommended way: https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#side-effects-on-props-change

But I’d probably ask what your cWRP is responding to. Could that be responsible for dispatching the action? Could you push the state transformation back to the store itself? There is probably a larger refactor that will actually put you in a better position not just for React async stuff, but as your app changes over time.

[gaearon]

No, gDSFP must be pure and contain no dispatch calls.

Dispatching in cDU is okay-ish. Although it’s still not that great from performance perspective to dispatch in response to re-rendering. But you were already doing it.