getDerivedStateFromProps Starting from React 16.3 there are some new lifecycle methods introduced. One of them is the static getDerivedStateFromProps(props,state) method. This method essentially synchronizes properties and state. 

The props and state of a react component aren't always a one-on-one match. But for simple components often a couple of props do match exactly on the state.

It's not strictly necessary to have this getDerivedStateFromProps(...) method actually. If your component doesn't really have an internal state, then there is no need to worry about it.

Anyway, in a case where there is an exact match of props and state I am trying to find the most elegant way to write this code.

The following is rather verbose:

static getDerivedStateFromProps(props, state) {
  // these 3 properties can change over time.
  const activeBaseNode = props.activeBaseNode;
  const filterOID = props.filterOID;
  const quickFilterRequest = props.quickFilterRequest;

  // compare them to the state
  if ((state.filterOID !== filterOID) || 
    (state.activeBaseNode !== activeBaseNode) || 
    (state.quickFilterRequest !== quickFilterRequest)) {

    // updates the state
    return ({ activeBaseNode, filterOID, quickFilterRequest });
  }

  // no changes --&gt; no updates
  return null;
}
Ted's answer is quite readable to me.

You could use some to detect if you need to submit changes as that is semantically closer to what you are doing:

if (['activeBaseNode', 'filterOID', 'quickFilterRequest']
    .some(prop =&gt; state[prop] !== props[prop])


It's perhaps nicer to reverse the logic with every and early exit, then extract all the properties only when you need them. Here I'm doing it with a function, avoiding defining three consts:

static getDerivedStateFromProps(props, state) {
  if (['activeBaseNode', 'filterOID', 'quickFilterRequest']
    .every(prop =&gt; state[prop] === props[prop]) return null

  return (({activeBaseNode, filterOID, quickFilterRequest}) =&gt; 
         ( {activeBaseNode, filterOID, quickFilterRequest}))(props)


That's cryptic and short approach. 

I don't really like that the names of the properties are repeated three times in all the solutions. To avoid that, a reduce can be used to build the properties that need to be updated:

const toUpdate = ['activeBaseNode', 'filterOID', 'quickFilterRequest']
  .find(prop =&gt; state[prop] !== props[prop])
  .reduce((m,k) =&gt; m[k] = props[k], {})
return Object.keys(toUpdate).length == 0 ? null : toUpdate


Once you get used to it, I think that's the clearest. It's got the essence of the problem and nothing more: the names of the properties, that the state != the props, and that you return null if nothing is changing.