props-changed

Compare if specified properties of two objects are different.

Usage

import { propsChanged, propsEqual } from 'props-changed';

propsChanged

Compares properties between two objects are different.

propsChanged(props, objA, objB);

Parameters

• props array of property names and/or paths to compare
• obtA object to compare
• objB other object to compare

Returns

true if any of the values at each property are different, else false.

Examples

Property names as strings

propsChanged(['x', 'y'], { x: 1, y: 1 }, { x: 1, y: 2 }); // true

Property paths as strings

propsChanged(['x', 'y.z'], { x: 1, y: { z: 1 } }, { x: 1, y: { z: 2 } }); // true

Property paths as arrays

propsChanged([['x'], ['y', 'z']], { x: 1, y: { z: 1 } }, { x: 1, y: { z: 2 } }); // true

propsEqual

Compares multiple properties between two objects.

propsChanged(props, objA, objB);

Parameters

• props array of property names and/or paths to compare
• obtA object to compare
• objB other object to compare

Returns

true if any of the values at each property are the same value, else false.

Examples

propsEqual(['x', 'y'], { x: 1, y: 1 }, { x: 1, y: 2 }); // true

Currying

All functions have auto-currying to make functional programming easier. For example:

const xChanged = propsChanged(['x']);

xChanged({ x: 1 }, { x: 2 }); // true
xChanged({ x: 1 })({ x: 2 }); // true

React

propsChanged was created for use with the React.Component method shouldComponentUpdate():

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    return propsChanged(['x', 'y'], this.props, nextProps);
  }
}

propsEqual can be used for React.memo with currying:

const MemoedComponent = React.memo(MyComponent, propsEqual(['x', 'y']));