この警告、正直最初は「なんで出てるの？」って感じでしたが、今回はeslintのルールを変えず、コメントでエラーを無視せず、根本的に解決する方法をシェアします。
ある日、以下のようなコードを書いていました。
すると、VS Codeで以下のようなeslintの警告が出ました。
えっ、setCountって関数だし、ステートのセッターなんだから依存配列に入れなくてよくない？と混乱。
調べて出てきたよくある解決策は以下の通り：
- eslintのルールを緩くする
// eslint-disable-next-line react-hooks/exhaustive-depsを使って警告を無視
でもこれはあくまで**"警告を消すだけ"の対応**で、根本的な理解にはつながりません。
依存配列にsetCountを入れると、以下のように無限ループが発生する場合もあります。
重要なのは「副作用を必要なときだけ実行する」こと。依存配列には必要な値を入れつつ、実行条件をコードで制御するのが正解です。
このように、依存配列は適切に保ちつつ、副作用の実行タイミングはif文などでしっかりガードすることが大事です。
useEffectの警告は無視せずに理解することが大切- 依存配列を適切に保ったまま、副作用の実行を条件で制御する
eslint-disableなどは最終手段
Reactに慣れてきた頃こそ、こういう落とし穴にハマりがちなので、ぜひ参考になれば嬉しいです！