react/no-redundant-should-component-update

Disallow shouldComponentUpdate in a class that extends React.PureComponent

React.PureComponent already decides when to render again by comparing the old and new props and state. If you write your own shouldComponentUpdate, it replaces that comparison, so extending PureComponent no longer does anything. Keep one of the two.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"react/no-redundant-should-component-update" = "error" # or "warn"

Examples#

example.jsx1 problem
class Price extends React.PureComponent {
  shouldComponentUpdate(nextProps) {
    return nextProps.amount !== this.props.amount;
  }

  render() {
    return <span>{this.props.amount}</span>;
  }
}
example.jsxNo problems
class Price extends React.PureComponent {
  render() {
    return <span>{this.props.amount}</span>;
  }
}

class Total extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.amount !== this.props.amount;
  }

  render() {
    return <strong>{this.props.amount}</strong>;
  }
}