title: Compare with previous props in getDerivedStateFromProps
body: <p>Think of a component that has a prop 'name' and state 'elapse'.</p>
  
  <pre><code>new Component(name) =&gt; "Hi {name}. It's been {elapse} seconds"
  </code></pre>
  
  <p><code>{elapse}</code> should be reset to 0 when the prop <code>{name}</code> changes.</p>
  
  <p>If the prop changes from 'Alice' to 'Bob' at 10 seconds,
  the message should change from</p>
  
  <blockquote>
    <p>Hi Alice. It's been 10 seconds</p>
  </blockquote>
  
  <p>to</p>
  
  <blockquote>
    <p>Hi Bob. It's been 0 seconds</p>
  </blockquote>
  
  <ul>
  <li><p><code>getDerivedStateFromProps</code> cannot be used because <code>{elapse}</code> is not a pure function of <code>{name}</code>, and I cannot return 0 because it may be called on re-render.</p></li>
  <li><p><code>componentDidUpdate</code> will eventually update <code>{elapse}</code> to 0, but before that, the invalid state <em>"Hi Bob. It's been 0 seconds"</em> is shown to the user.</p></li>
  </ul>
  
  <p>Can <code>getDerivedStateFromProps</code> or <code>componentDidUpdate</code> implement this scenario?</p>
  
  <ol>
  <li><p>In many cases the state is not a pure function of props. Is <code>getDerivedStateFromProps</code> only for stateless functional components? Does react encourage the use of stateless components?</p></li>
  <li><p>How can <code>getDerivedStateFromProps</code> replace <code>componentWillReceiveProps</code> in stateful components?</p></li>
  </ol>