開発環境では問題が無く、ビルド時にエラーも出ないが、デプロイ（本環境）でのデータフェッチが失敗する

はじめに

この警告、正直最初は「なんで出てるの？」って感じでしたが、今回はeslintのルールを変えず、コメントでエラーを無視せず、根本的に解決する方法をシェアします。

なにが起こったか？

ある日、以下のようなコードを書いていました。

すると、VS Codeで以下のようなeslintの警告が出ました。

えっ、setCountって関数だし、ステートのセッターなんだから依存配列に入れなくてよくない？と混乱。

よくある「解決策」（でも根本解決じゃない）

調べて出てきたよくある解決策は以下の通り：

• eslintのルールを緩くする
• // eslint-disable-next-line react-hooks/exhaustive-deps を使って警告を無視

でもこれはあくまで**"警告を消すだけ"の対応**で、根本的な理解にはつながりません。

実際にハマったポイント

依存配列にsetCountを入れると、以下のように無限ループが発生する場合もあります。

解決方法：ifで条件を制御する

重要なのは「副作用を必要なときだけ実行する」こと。依存配列には必要な値を入れつつ、実行条件をコードで制御するのが正解です。

このように、依存配列は適切に保ちつつ、副作用の実行タイミングはif文などでしっかりガードすることが大事です。

まとめ

• useEffectの警告は無視せずに理解することが大切
• 依存配列を適切に保ったまま、副作用の実行を条件で制御する
• eslint-disableなどは最終手段

Reactに慣れてきた頃こそ、こういう落とし穴にハマりがちなので、ぜひ参考になれば嬉しいです！