# eslint rule React Hook useEffect has missing dependencies を解消する

eslint rule React Hook useEffect has missing dependencies

useEffect(() => {
  something(dependency, otherDependency);
}, []);

# warning の原因

この React コードで ESLint 警告が発生する原因は、useEffect フックの依存リスト（dependency array）が空のままであることです。useEffect フックは、依存リストに指定した変数が変更された場合にのみ実行されるべきですが、依存リストが空の場合、常に実行される可能性があるため、ESLint は警告を表示します。

useEffect が常に実行される理由がある場合以外は、依存リストを正しく設定することで、コンポーネントの再レンダリングのトリガーとなる変更を適切に管理できます。
依存リストが空の場合、useEffect フックは初回のレンダーに一度だけ実行され、その後は変数の変更を監視しなくなります。もしこの useEffect が常に実行される必要がある場合でも、依存リストを空にするのではなく、空の配列 ([]) を渡す代わりに null や undefined を渡すことが推奨されます。

useEffect 仕様

useEffect(callback, dependencyArray);

callback: 副作用を実行する関数です。この関数はコンポーネントがマウントされた後、更新された後、アンマウントされる前に実行されます。この関数はクロージャー内で最新の props と state にアクセスできます。

dependencyArray（オプション）: この配列は、callback 関数が依存する変数のリストを指定します。React はこの配列を使用して、callback 関数をどのタイミングで実行するかを制御します。依存配列が空であれば、callback は初回のレンダー時にのみ実行され、以降は実行されません。依存リストに変数が指定されている場合、その変数が変更された場合に callback が再実行されます。

# warning 対策

# null に設定する

dependencyArray が null または undefined の場合、React は依存リストが空であるとみなし、useEffect のコールバック関数を初回のレンダー時のみ実行します。このようにして、特定の依存変数をトラッキングせずに、一度だけ実行される副作用を設定することができます。

useEffect(() => {
  something(dependency, otherDependency);
}, null);

# 該当行を ESLint のルールを無効にする

useEffect(() => {
  something(dependency, otherDependency);
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

# コード全体のルールを無効にする

.eslintrcをルートディレクトリに作成し、ESLint のルールを書く

// .eslintrc.json または eslint の設定ファイル内で
{
  "extends": ["react-app", "react-app/jest"],
  "rules": {
    "react-hooks/exhaustive-deps": "off"
  }
}

"react-hooks/exhaustive-deps": "off" を設定することで、ESLint の eslint-plugin-react-hooks プラグインによる react-hooks/exhaustive-deps ルールを無効にすることができます。
これにより、依存リストをチェックする警告が表示されなくなります。