props-changed

Compare if specified properties of two objects are different.

Usage

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

propsChanged

Compares properties between two objects are different.

1propsChanged(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

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

Property paths as strings

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

Property paths as arrays

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

propsEqual

Compares multiple properties between two objects.

1propsChanged(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

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

Currying

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

1const xChanged = propsChanged(['x']);
2
3xChanged({ x: 1 }, { x: 2 }); // true
4xChanged({ x: 1 })({ x: 2 }); // true

React

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

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

propsEqual can be used for React.memo with currying:

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