Lintで「Warning: React Hook useEffect has missing dependencies:」エラーの件

Nextjsで実装していたときに、

Lintチェックをしたときに、

Warning: React Hook useEffect has missing dependencies: 
'xxxxxx' and 'xxxxxx'. 
Either include them or remove the dependency array.  
react-hooks/exhaustive-deps

のエラーが発生。

このエラーを対応した時のメモ。

個人的な備忘録としてこの記事に残します。

Lint実行コマンド

Next.jsで、Lintでコード確認したいので、

以下のコマンドを実行

npm run lint

エラー内容

先ほども記載した通り、

上記のLintを実行すると、

Warning: React Hook useEffect has missing dependencies: 
'xxxxxx' and 'xxxxxx'. 
Either include them or remove the dependency array.  
react-hooks/exhaustive-deps

このような表示が出ていた。

調整内容

上記のエラー内容を見てみると、

Warning: React Hook useEffect has missing dependencies: 
'xxxxxx' and 'xxxxxx'. 
Either include them or remove the dependency array.  
react-hooks/exhaustive-deps

の中で、

依存関係周りがうまくいっていないので、

  • 対象を依存関係に含める
  • 依存関係の配列を削除

のどちらかを対応する必要があるらしい。

上記に関して、

useEffectの依存関係を調整。

調整前

  useEffect(() => {
    :
  }, []);

調整後

  useEffect(() => {
    :
  });

上記のように、

依存設定自体の配列を消す対応を行った。

こちらで、

Lintのエラー表示が消えました。

ピックアップ

こちらもおすすめ

初心者向けの色々な情報はあるけれど、

  • 無料でお試しができるスクール
  • ホームページなど簡単に作成できる
  • 組織で使いたいサービス

について、

少しでも試して良いものがあると、

それを活用することで学習や業務などが効率化できるので、

おすすめのサイトなどをいくつか紹介しておきます

おすすめ書籍

スポンサー

人気記事

おすすめ記事