getDerivedStateFromProps - responding to change in props

The documentation states

This method exists for rare use cases where the state depends on changes in props over time

However, having read through https://github.com/facebook/react/issues/12188, it appears the only way to achieve this (checking props against prevProps to respond to a change) is by copying props into state - which appears to directly contradict your article on derived state anti patterns.

To say the least I’m a bit confused - should the documentation be changed (and getDerivedStateFromProps should not be used for responding to changes in props), or should I go ahead with the anti-pattern approach of copying props to state (pls no)? Or is there something I am missing?

TIA

[gaearon]

Thanks for providing an example! This ensures the conversation isn’t going in circles.

What I need is a way of setting followRegion back to true when the region passed down as props changes (this indicates new dataset)

As written in the blog post, the preferred alternative is to reset the state with a key.

<TripMap region={region} key={region.id} />

(If you don’t have an ID property, you can just increment an integer every time you change the region or something like this.)

The mechanism you’re suggesting (“automatically reset followRegion when region changes”) is discouraged because the notion of “change” often doesn’t really make sense here. For example, you might want to update region for some unrelated reason later without triggering a state reset — but now you don’t have that option because components below assume every object identity change is a reset.

If you don’t want to use the recommended key solution then sure, you’d need to keep prevRegion (or, better, prevRegionID) in the state. It doesn’t contradict the article — this solution is explicitly mentioned as less recommended, but plausible. It’s more verbose and usually unnecessary, but you can do it if you’d like.

Hope this helps.

[Billy-]

Although, that is an eslint issue, and is already reported here.