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

はじめに

React Hook useEffect has a missing dependency

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

なにが起こったか？

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

import { useEffect, useState } from "react";

function SampleComponent({ value }: { value: number }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (value < 0) return; // 条件によって実行を制御
    setCount(value);
  }, [value]);

  return <div>{count}</div>;
}

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

React Hook useEffect has a missing dependency: 'setCount'. Either include it or remove the dependency array.

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

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

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

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

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

実際にハマったポイント

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

useEffect(() => {
  setCount((prev) => prev + 1);
}, [setCount]); // 毎回更新されて無限ループ...

解決方法

ifで条件を制御する

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

useEffect(() => {
  if (value < 0) return; // 条件で早期リターン
  setCount(value);
}, [value]);

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

まとめ

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

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