Handling componentWillReceiveProps deprecation in React >= 17

[gcpantazis]

The docs currently reference componentWillReceiveProps as the recommended way to listen to route changes when using shallow routing:

You can watch for URL changes via componentWillReceiveProps hook as shown below:

componentWillReceiveProps(nextProps) {
  const { pathname, query } = nextProps.url
  // fetch data based on the new query
}

This lifecycle, however, is on the deprecation path; it will stop working as-named in React 17: https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

Given that, we should provide a more future-friendly solution for listening for shallow route changes. Perhaps adding a popstate listener in componentDidMount. If that seems like the best option I can add it to docs, but opening this ticket for discussion/tracking.

[timneutkens]

I guess we should just use https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops 🤔

[gcpantazis]

I'll have to play with it more; offhand it doesn't look like it plays nice with next-redux-wrapper (though reduxjs/react-redux#915 makes it seem like it should).

[timneutkens]

react-hot-loader is also using componentWillReceiveProps in AppContainer right now btw.

[tim-phillips]

When using getDerivedStateFromProps in one of my page components, I get this error in the console:

Warning: Unsafe legacy lifecycles will not be called for components using new component APIs.

_default uses getDerivedStateFromProps() but also contains the following legacy lifecycles:
componentWillReceiveProps

Do you think this means the use of the new component API stops componentWillReceiveProps from running in AppContainer?

[timneutkens]

Related to react-hot-loader. We have to update to rhl 5.1 for it to work correctly, but I want to do some testing first

[timneutkens]

This was solved, we deprecated the url property.