React Hook useEffect has missing dependenciesについて
この記事の目的
React Hook useEffect has missing dependenciesのwarningについてよくわからなかったので解決法と理解を深める。
そもそもuseEffectを何となく使用してしまっていたのでuseEffectについておさらいしたい。
useEffectとは
useEffectとは関数コンポーネントで副作用を実行するためのhookです。
＊hookとはReact 16.8 で追加された新機能で、state などの React の機能を、関数コンポーネント内で扱えるようにするための関数です。
ここでいう副作用とは「関数の外に影響を与えてしまう関数」で、具体的に以下が挙げられます。
- DOMの変更
- APIとの通信
- console.log
- ファイルへの書き込み
- state/propsの変更
- オブジェクトまたはその内部のプロパティへの代入
- 配列のpush()
これらの処理はuseEffect内で行いましょうということなのでしょう。。。
useEffectの使い方
実際にuseEffectを使う際は第二引数に空の配列を指定すると初回レンダリング後のみ関数が実行されます。また第二引数に値を指定すると、その値に変化があったときに関数が実行されます。
ここで第二引数自体を空にすると毎回のレンダリングごとに関数が実行されますが、思わぬケースで関数が実行されてします危険があります。ですので実際にはpropsの値やstateを指定したり、空配列を指定して初回のみ実行されるようにします。
本題のwarning解消法について
warnigが起こる原因としては、useEffect内で依存関係を表す変数を使用しでおり、useEffectの第二引数に空配列を指定した時に依存関係がおかしいということでwarningが起こるみたいです。以下の記事で詳しく書かれていますのでそちらを参照ください。
useEffect has amissing dependencyのwarningを解消する
そもそもuseEffect使用時はこのwarningが発生する条件を満たしてしまうことが多く、発生するのは仕方のないことのようです。
参考文献
この記事は以下の情報を参考にして執筆しました。
Discussion