【Next.js】React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.の解決方法

Last updated at 2025-07-01Posted at 2025-06-30

はじめに

Next.jsで開発中に、useEffectの使用に関してエラーが発生しました。本記事ではその原因と解決方法についてまとめます。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

以下のようなコードを書いたところ、React Hooksに関するエラーが発生しました。

//省略

if (error) {
    return <div>エラーが発生しました</div>;
  }
  
useEffect(() => {
  if (videos) {
    setFilteredData(videos);
    }
  }, [videos]);

このように、if文の後にuseEffectを書いただけでエラーになってしまいます。

React Hooks（useEffect, useStateなど）は常にコンポーネントのトップレベルで呼び出す必要があります。「if文の中でuseEffectを呼び出しているわけではないのに、なぜエラーになるのか？」と疑問に感じました。

Reactは条件分岐があるだけで呼び出しが条件付きと判断してしまいます。
たとえば下記のような構造と見なされてしまいます：

if (error) {
  // error true のとき
} else {
  useEffect(() => {
    // error false のときだけ実行される
  }, []);
}

useEffectなどのHooksは必ずコンポーネントのトップレベルで実行されるように配置します。
以下のように、if文よりも前にuseEffectを書くことでエラーは解消されます。

useEffect(() => {
  console.log('Effect');
}, []);

if (error) {
  return <div>Error</div>;
}

if文やreturn文の前後でエラーになることがあるので、トップレベルで定義するというルールを意識していきたいです。

『React Hooksはなぜトップレベルに書かないといけないのか。』Qiita

『React Hooksのルールをよく理解しないとハマるエラー対処法』Qiita