← Back to rules

react/exhaustive-deps 正しさ

An auto-fix is available for this rule.

何を検証するか

useEffect などのフックの依存関係リストの正確性を確認します。

なぜ問題なのか

useEffect などの React フックは、引数として依存関係のリストを渡す必要があります。このリストは、エフェクトが再実行されるべきタイミングを決定するために使われます。リストに不足や不完全な項目がある場合、エフェクトが必要以上に頻繁に実行されたり、まったく実行されなかったりする可能性があります。

例

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

function MyComponent(props) {
  useEffect(() => {
    console.log(props.foo);
  }, []);
  // 依存関係配列に `props` が含まれていない
  return <div />;
}

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

function MyComponent(props) {
  useEffect(() => {
    console.log(props.foo);
  }, [props]);
  return <div />;
}

設定

このルールは以下のプロパティを持つ設定オブジェクトを受け入れます。

additionalHooks

型: string

デフォルト: null

追加でチェックするフックの正規表現を指定できます。

使い方

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

設定 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/exhaustive-deps": "error"
  }
}

CLI

oxlint --deny react/exhaustive-deps --react-plugin

参照

• ルールのソース