はじめに

開発環境では、動作、デバッグ等問題ありませんでしたが、Vercelへデプロイする際に「Type error～」というエラーによりビルドが失敗していました。

エラー概要

Vercelのビルドログを確認すると以下のようなエラーメッセージが出力されていました。

Error: React Hook "useContext" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?  react-hooks/rules-of-hooks

React Hooks（useContext、useState、useEffect など）は、「無条件で」「常に同じ順番で」呼び出さなければいけないルールがあるそうです。

対策

以下対策です。

・条件式（if、for、try-catch　等）の中でHooksを呼ばない
・早期リターン (return) の前にHooksをすべて呼び出す

具体例を示しながら説明していきます！

①条件式（if、for、try-catch　等）の中でHooksを呼ばない

＜誤った使い方＞

if (something) {
  const context = useContext(MyContext); // ダメ！条件付き呼び出し
}

＜修正後＞

const context = useContext(MyContext);

if (something) {
  // context を使う
} else {
  // context を使う
}

②早期リターン (return) の前にHooksをすべて呼び出す

＜誤った使い方＞

if (!user) {
  return null; // ここで return してしまうと...
}

const context = useContext(MyContext); // ここで Hook を呼び出す => ダメ

＜修正後＞

const context = useContext(MyContext);

if (!user) {
  return null; // Hook の後に return するのはOK
}

まとめ

・条件式（if、for、try-catch　等）の中でHooksを呼ばない
・早期リターン (return) の前にHooksをすべて呼び出す

単純でふと忘れてしまいすが、デプロイエラーとなると煩わしいので気を付けたいですね！

参考

ありがとうございました。

・フックを呼び出すのはトップレベルのみ

Let's share!