react/require-optimization

A class component renders again each time its parent renders, even if its props and state are the same. shouldComponentUpdate lets it skip those renders. React.PureComponent does the comparison for you.

The rule doesn't check function components. A createReactClass component also passes if PureRenderMixin is in its mixins.

Configure

Off by default. To turn it on:

[lint.rules]
"react/require-optimization" = "error" # or "warn"

Every option, set to its default:

[lint.rules]
"react/require-optimization" = ["error", {
  allowDecorators = [], # list of strings
}]

Examples

Reported:

class Row extends React.Component {
  render() {
    return <li>{this.props.label}</li>;
  }
}

Not reported:

class Row extends React.PureComponent {
  render() {
    return <li>{this.props.label}</li>;
  }
}

class Cell extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value;
  }
  render() {
    return <td>{this.props.value}</td>;
  }
}

Options

Not reported with allowDecorators: ["pureRender"]:

@pureRender
class Row extends React.Component {
  render() {
    return <li>{this.props.label}</li>;
  }
}

When not to use it

Comparing props has a cost too. For a component that nearly always gets new props, the check is wasted work on top of the render.