title: How to use lifecycle method getDerivedStateFromProps as opposed to componentWillReceiveProps
body: <p>It looks like <code>componentWillReceiveProps</code> is going to be completely phased out in coming releases, in favor of a new lifecycle method <code>getDerivedStateFromProps</code>:<a href="https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops" rel="noreferrer">static getDerivedStateFromProps()</a>.</p>
  
  <p>Upon inspection, it looks like you are now unable to make a direct comparison between <code>this.props</code> and <code>nextProps</code>, like you can in <code>componentWillReceiveProps</code>. Is there any way around this?</p>
  
  <p>Also, it now returns an object. Am I correct to assume that the return value is essentially <code>this.setState</code>?</p>
  
  <p>Below is an example I found online: <a href="https://github.com/reactjs/rfcs/blob/master/text/0006-static-lifecycle-methods.md#state-derived-from-propsstate" rel="noreferrer">State derived from props/state</a>.</p>
  
  <p><strong>Before</strong></p>
  
  <pre><code>class ExampleComponent extends React.Component {
    state = {
      derivedData: computeDerivedState(this.props)
    };
  
    componentWillReceiveProps(nextProps) {
      if (this.props.someValue !== nextProps.someValue) {
        this.setState({
          derivedData: computeDerivedState(nextProps)
        });
      }
    }
  }
  </code></pre>
  
  <p><strong>After</strong></p>
  
  <pre><code>class ExampleComponent extends React.Component {
    // Initialize state in constructor,
    // Or with a property initializer.
    state = {};
  
    static getDerivedStateFromProps(nextProps, prevState) {
      if (prevState.someMirroredValue !== nextProps.someValue) {
        return {
          derivedData: computeDerivedState(nextProps),
          someMirroredValue: nextProps.someValue
        };
      }
  
      // Return null to indicate no change to state.
      return null;
    }
  }
  </code></pre>