こんにちは。
野中やすおです。
今回の記事では、私が遭遇した「React Hook useEffect has a missing dependency: ‘XXX’. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps」というwarningの原因とその対処方法について解説します。
そもそもの原因
このwarningは、warningの内容を見る限りreact-hooks/exhaustive-depsというESLintが出しているエラーのようです。
で、このエラーはESLintがuseEffectに対して「依存関係がおかしい・欠落している」場合に警告を出しています。
対処方法
以下の記事がとても参考なりました。
- 依存関係を解消する
- 特定の行だけESLintのルールを無効にする
- ソースコード全体でESLintのルールを無効にする
依存関係を解消
以下のように第２引数を空の配列からdependencyやotherDependencyを追加することで、warningが出なくなります。
|
1 2 3 |
useEffect(()=>{ something(dependency, otherDependency); },[dependency, otherDependency]); |
ただし、dependencyやotherDependencyが更新されるたびにuseEffectが実行されることが注意が必要です。
特定の行だけESLintのルールを無効
２つ目は、「特定の行だけESLintのルールを無効にする」ということで以下のように「eslint-disable-next-line react-hooks/exhaustive-deps」を追加すればwarningが出なくなります。
|
1 2 3 4 5 |
useEffect(() => { setAddress(obj); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); |
私の場合は、こちらを選択しました。
ソースコード全体でESLintのルールを無効
.eslintrc.jsonなどのファイルに対して、以下のようにルールを追加することでソースコード全体でルールそのものを無効化することができます。
|
1 2 3 |
"rules": { "react-hooks/exhaustive-deps": "off" } |
