← Back to rules

react/no-redundant-should-component-update スタイル

何を行うか

React.PureComponent を継承している場合、shouldComponentUpdate の使用を禁止します。

なお、PureComponent の使用は 現代の React では推奨されていません。

なぜ問題なのか

React.PureComponent は浅いプロパティおよび状態の比較を使って自動的に shouldComponentUpdate を実装します。 React.PureComponent から継承するクラスで shouldComponentUpdate を定義することは冗長であり、React.PureComponent を使う目的に反します。 カスタム比較ロジックが必要な場合は、代わりに React.Component から継承してください。

例

このルールに関して 誤り なコードの例：

class Foo extends React.PureComponent {
  shouldComponentUpdate() {
    // チェックを行う
  }

  render() {
    return <div>Radical!</div>;
  }
}

function Bar() {
  return class Baz extends React.PureComponent {
    shouldComponentUpdate() {
      // チェックを行う
    }

    render() {
      return <div>Groovy!</div>;
    }
  };
}

このルールに関して 正しい コードの例：

class Foo extends React.Component {
  shouldComponentUpdate() {
    // チェックを行う
  }

  render() {
    return <div>Radical!</div>;
  }
}

function Bar() {
  return class Baz extends React.Component {
    shouldComponentUpdate() {
      // チェックを行う
    }

    render() {
      return <div>Groovy!</div>;
    }
  };
}

class Qux extends React.PureComponent {
  render() {
    return <div>Tubular!</div>;
  }
}

使い方

設定ファイルまたは CLI でこのルールを 有効化 するには、次のように使用できます：

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-redundant-should-component-update": "error"
  }
}

CLI

oxlint --deny react/no-redundant-should-component-update --react-plugin

参照

• ルールのソース