Compare with previous props in getDerivedStateFromProps

Question

Think of a component that has a prop 'name' and state 'elapse'.

new Component(name) => "Hi {name}. It's been {elapse} seconds"

{elapse} should be reset to 0 when the prop {name} changes.

If the prop changes from 'Alice' to 'Bob' at 10 seconds, the message should change from

Hi Alice. It's been 10 seconds

to

Hi Bob. It's been 0 seconds

• getDerivedStateFromProps cannot be used because {elapse} is not a pure function of {name}, and I cannot return 0 because it may be called on re-render.

• componentDidUpdate will eventually update {elapse} to 0, but before that, the invalid state "Hi Bob. It's been 0 seconds" is shown to the user.

Can getDerivedStateFromProps or componentDidUpdate implement this scenario?

1. In many cases the state is not a pure function of props. Is getDerivedStateFromProps only for stateless functional components? Does react encourage the use of stateless components?

2. How can getDerivedStateFromProps replace componentWillReceiveProps in stateful components?

Answer 1

If you look around you'll see you're not the first one having this problem - it was thoroughly discussed on github ^{1 2 3} and in a thread on hackernews here. The recommended solution is to mirror the props you need to check in the state:

state = { name: "", lastTime: Date.now() }

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.name !== prevState.name) {
        return { name: nextProps.name, lastTime: Date.now() };
    }
    return null;
}