🦔

UseEffectの第二引数で出るwarningの解消

2023/07/10に公開

useEffectでwarning`React Hook useEffect has an unnecessary dependency...`が発生

これは、ESlintのreact-hooks/exhaustive-depsの設定により表示されています。
バグを防ぐためにuseEffectの第二引数にuseEffect内で使用している変数を指定する必要があります。

次のコードの例では第二引数に指定する変数fugaが足らないためwarningが発生する

useEffect(() => {
  calc(hoge, fuga)
}, [hoge]);

以下のようにするとwarningが消える

useEffect(() => {
  calc(hoge, fuga)
}, [hoge,fuga]);

依存する変数が第二引数にないことでwarningが発生しています。
バグを引き起こしやすいためこのようなwarningが発生するようです。

VSCodeなどで設定するとエディター上ですぐにわかるWarningになると思うので
設定は大事だと思いました