Specialized shouldComponentUpdate on PureComponent

Question

I am trying to create a component that shouldn't when a certain property is true, but should perform a shallow compare (the default for PureComponent).

I've tried doing the following behavior:

export default class ContentsListView extends PureComponent<Props> {
  shouldComponentUpdate(props: Props) {
    if (props.selecting) {
      return false;
    }
    return super.shouldComponentUpdate(props);
  }

  render() {
  }
}

However, super.shouldComponentUpdate is not defined. Is there some way to "tap into" the shallow compare of PureComponent without writing my own?

Answer 1

There is no super.shouldComponentUpdate in PureComponent because it implements shallow checks by checking isPureReactComponent property, not with shouldComponentUpdate. A warning is issued when both isPureReactComponent and shouldComponentUpdate are in use because shouldComponentUpdate efficiently overrides the behaviour of isPureReactComponent.

React doesn't expose its shallowEqual implementation, third-party implementation should be used.

In case this becomes a common task, own PureComponent implementation can be used for extension:

import shallowequal from 'shallowequal';

class MyPureComponent extends Component {
  shouldComponentUpdate(props, state) {
    if (arguments.length < 2)
      throw new Error('Do not mess super arguments up');

    return !shallowequal(props, this.props) || !shallowequal(state, this.state);
  }
}

class Foo extends MyPureComponent {
  shouldComponentUpdate(props, state) {
    if (props.selecting) {
      return false;
    }
    return super.shouldComponentUpdate(props, state);
  }
}