getDerivedStateFromProps is executed after setState

[fcaballero]

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

BUG

What is the current behavior?

Whenever the state is update via setState method, getDerivedStateFromProps is also executed even if the props have not changed.

I'm not sure if this is a bug, if it's not, this is kind of unexpected and it's not clear in the post you've published about it.

See this JSFiddle, I'm not sure which version of React is used in here, but it's reproducible.

What is the expected behavior?

When I update the state via setState, getDerivedStateFromProps should not be executed unless any prop has changed.

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

React: 16.4.0
node -v: v8.9.4
npm -v: 5.6.0
Operating system: Windows 10
Browser and version: Chrome 66.0.3359.181 (Official Build) (64-bit)

[gaearon]

It is expected. See for details:

https://reactjs.org/blog/2018/05/23/react-v-16-4.html#bugfix-for-getderivedstatefromprops
https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

If this change breaks your code, it means your code already has a bug that causes state to reset too often.

[fcaballero]

@gaearon thank you for the clarification.

[minbelapps]

Simple question: what to do, if getDerivedStateFromProps is required just to update the state after the props are changed?

[minbelapps]

It is expected. See for details:

https://reactjs.org/blog/2018/05/23/react-v-16-4.html#bugfix-for-getderivedstatefromprops
https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

If this change breaks your code, it means your code already has a bug that causes state to reset too often.

I am confused: The https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html says: getDerivedStateFromProps exists for only one purpose. It enables a component to update its internal state as the result of changes in props.

So why it's updated after the state change?

[ethanshar]

TBH, I'm puzzled with this (not so new) getDerivedStateFromProps API.
As its name suggests, it should derive state from props, not from props & state.

It's been a while now since this API was released, we have few components that still use the UNSAFE componentWillReceiveProps which I'm not sure yet how we should migrate.

In the blog post, the examples that demonstrate how this API can be avoided are way too simple.
IRL, you have more complex cases which unfortunately combine both controlled and uncontrolled behaviors.
I understand those are considered a bad practice, but if until now we had some way to achieve these implementations using getDerivedStateFromProps, Now, with the recent update it is just impossible.

Last, why should anyone want to derive a state from state, if I've used setState in my code, I would include the derived state in that setState call to begin with.

[minbelapps]

I got one issue with some application that has legacy code. In order to achieve getDerivedStateFromPropsworking correctly, I implemented this component as old componentWillReceiveProps , because the state changes had the priority against props changes as the state was controlled by user actions. To achieve this, I stored previous props and did additional checkings to know if the state is changed. This solution is ridiculous with addional not necessary code and complexity. Ir reminds me of old (1.6) Angular.

Another solution could rewrite the million line of code of a legacy application, and right now to do this is not the case (it would be done step by step).

As @ethanshar mentioned, we not always writing simple code (combine both controlled and uncontrolled principles) and not always writing applications from scratch.

[Samnan]

using react 16.8.6 and had the same issue today, i know the issue is closed, but it is still does not make any sense that changing anything in internal state of component would call getDerivedStateFromProps

if this is supposed to work on both props and state change, why deprecate componentWillReceiveProps?

[bogomazov]

@gaearon Please, open the issue, as it is truly unexpected behavior.

[ronaklalwaniii]

@gaearon Please, open the issue, as I am also facing this issue.

[stopitdan]

please open!

this is screwing with me too - based on the doc's saying getDerivedStateFromProps exists for only one purpose. It enables a component to update its internal state as the result of changes in props. I am super confused as to why it would be called when state updates?

either the docs need to be updated to better describe the purpose of this method, or the method needs to be updated to better reflect the docs

[tianzhich]

same issue here

[philipfabianek]

In case anyone is still wondering, this makes the most sense to me. Since getDerivedStateFromProps depends on the old state, it only makes sense that it is called after a state change as well.