React Hook “” is called conditionally. React Hooks must be called in the exact same order in every component renderというエラーについて解説します。

2024年12月14日

背景

Reactでは、コンポーネント内で状態管理や副作用の処理を行うためにReact Hooksが使用されます。しかし、間違った使い方をすると、”React Hook “” is called conditionally. React Hooks must be called in the exact same order in every component render” というエラーが発生することがあります。このエラーは初心者から経験者まで広く遭遇するもので、正しい使い方を理解することが重要です。

エラーが発生した前提情報

使用フレームワーク: React
使用するHook: useState, useEffect, useContext など
条件分岐が含まれるコンポーネント

エラーが発生した実際のソースコード

import React, { useState } from 'react';

function ExampleComponent({ isLoggedIn }) {
  if (isLoggedIn) {
    const [user, setUser] = useState('Guest');
    return <div>Welcome, {user}!</div>;
  }
  return <div>Please log in.</div>;
}

エラーが発生した原因

上記のコードでは、useState が if (isLoggedIn) の条件内で呼び出されています。React Hooksはコンポーネントの最上位で、常に同じ順序で呼び出す必要があります。このルールを破ると、レンダーのたびに異なる状態になる可能性があるため、Reactはエラーをスローします。

React Hooksの仕様の説明

ReactのHooksには特定の呼び出しルールが存在します。これには重要な理由があり、Reactのレンダリングと状態管理の仕組みに深く関わっています。

なぜReact Hooksに順序の制約があるのか？

ReactはHooksの呼び出し順序に基づいて状態を管理しています。各レンダリングで、Reactはコンポーネント内のHooksがどのように呼び出されるかを記録し、それに基づいて内部的な状態や副作用を追跡します。もし呼び出し順序が変わると、Reactは状態の割り当て先を正しく認識できず、予期しないバグが発生します。

React Hooksの呼び出しルール

最上位で呼び出す: ループ、条件分岐、ネストされた関数内で呼び出してはいけません。これにより、各レンダーで呼び出し順序が一定に保たれます。
React関数内で呼び出す: Hooksはコンポーネント関数またはカスタムHook内でのみ使用できます。通常のJavaScript関数内で呼び出すと、状態管理が正しく動作しません。

このルールの重要性

これらのルールに従うことで、Reactはコンポーネントの状態と副作用を効率的かつ正確に管理できます。状態の管理や再レンダリングの際に起こりうる混乱を防ぐため、Hooksの呼び出し順序を守ることは極めて重要です。

エラーを回避する方法

エラーを避けるために、条件分岐の外でHookを呼び出すように修正します。

import React, { useState } from 'react';

function ExampleComponent({ isLoggedIn }) {
  const [user, setUser] = useState('Guest');

  if (isLoggedIn) {
    return <div>Welcome, {user}!</div>;
  }
  return <div>Please log in.</div>;
}

このように修正すれば、useState は常に同じ順序で呼び出されるため、エラーは発生しません。