Add oldProps as additional argument to getDerivedStateFromProps ?

Do you want to request a feature or report a bug?

feature

What is the current behavior?

getDerivedStateFromProps only receives the nextProps and previousState as arguments.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

The deprecated componentWillReceiveProps(nextProps) used to allow code like this.props.foo !== nextProps.foo. With the new getDerivedStateFromProps function, there’s no choice (because it is a static method) but to constantly copy nextProps.foo into state in order to access it later.

This is illustrated in the example posted to twitter by @gaearon: https://twitter.com/dan_abramov/status/953612246634188800?lang=en

What is the expected behavior?

Ideally (if it’s not difficult to implement!) the getDerivedStateFromProps would also take the current (previous/old) props as an argument, something like:

getDerivedStateFromProps(nextProps, prevState, prevProps)

This would eliminate the need to constantly assign props to state purely for comparison purposes…

A quick look at the source doesn’t make it clear to me how easy this would be though…

https://github.com/facebook/react/blob/4a20ff26ecfe9bc66941d79f7fce2c67be8ee236/packages/react-dom/src/server/ReactPartialRenderer.js#L456

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

16.3.0

[jharris4]

Right, as I mentioned in my original post, I know the current API does enable this, but it requires mixing props into the state (I had linked to a similar example to the one you just provided).

I know it’s not the end of the world to mix the props into the state, but to me it has a bad code smell (particularly when you’re only mixing props into state for the sole use of this function).

I’d be curious to know why you think the prevProps parameter would be confusing, particularly since the use of it would be entirely optional.

Thanks for linking the RFC issue (https://github.com/reactjs/rfcs/issues/19), I hadn’t thought to look for discussion in the other repo! 😃

To summarize, we currently have a large number of React Components that currently utilize componentWillReceiveProps, and almost all of them compare several props with this.props.prop !== nextProps.prop.

When we migrate to using getDerivedStateFromProps we’ll now have to push each and every one of those props into state, which in my opinion is not ideal.

It also means we’ll have to go and sanity check the state of each of these components to make sure that we don’t accidentally end up with prop vs state key collisions, and we have to make sure we don’t mixup reading the key from state accidentally instead of props…

That last point is probably one of the best reasons I could put forward as to why I think it’d be cleaner (and arguably less confusing) to just pass the prevProps as an extra argument.

[jharris4]

Ahhh! yeah, that was not obvious, it was indeed buried under the “show outdated”. Thanks for your patience while I got orientated! 😃

So I now know that by “confusion” you were referring to the initial call to getDerivedStateFromProps where the prevProps do not yet exist…

My vote would still be to do that rather than force pollution of the state, but having now read the original thread, I see that this concern was already raised and that you’ve nonetheless committed to the API as is.

Maybe I’ll look into creating some kind of utility HOC that at least removes the duplicated boilerplate required for moving props to state, and ideally even stores all stateProps under one state key to mitigate the risk of collisions. something like:

getDerivedStateFromProps(nextProps, prevState) {
  const  prevProps = prevState.__cloneProps;  
  if (!prevProps || prevProps.propA !== nextProps.propA || prevProps.propB !== nextProps.probB) {
    return {
      thingInState: "value",
      __cloneProps: cloneObjectWithKeys(nextProps, ['propA', 'propB'])
    };
  } 
  return null;
}