Make components more efficient with shouldComponentUpdate

[humphreyja]

We should be able to just use 'PureComponent' for most of this. But any component that has an object as a prop will need to be put through a better function. NOTE: Lodash's isEqual function will work for all cases except when it needs to check functions. Functions are checked using instances. So for example this will always be flagged as Not Equal.

const filters = [
{
    onChange: (value) => {//do something}
}
]

// ... in shouldComponentUpdate of a child component

_.isEqual(this.props, nextProps)
// => false

That's because the instance of that function is being changed every time. To combat this, I would suggest we use the below function to basically ignore functions in the comparison as they should really ever change. We could provide an additional Prop to disable the checking as well. This would be helpful so that our inputs don't need to be reconciled every time there is a change.

const propsAreEqual = (props, nextProps) => {
    const propChecker = (objectVal, otherVal) => {
      if (typeof objectVal === 'function' && typeof otherVal === 'function') {
        return true;
      }
      return undefined;
    };

    return _.isEqualWith(props, nextProps, propChecker);
  }