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のエラー表示が消えました。
ピックアップ
こちらもおすすめ
初心者向けの色々な情報はあるけれど、
- 無料でお試しができるスクール
- ホームページなど簡単に作成できる
- 組織で使いたいサービス
について、
少しでも試して良いものがあると、
それを活用することで学習や業務などが効率化できるので、
おすすめのサイトなどをいくつか紹介しておきます
