React入門 練習問題 57：Reactフックのルールとエラー解決
次のReactアプリケーションでエラーが表示されました。コードを見て、最も考えられる原因は何ですか？
**エラーメッセージ:**
```
Warning: React has detected a change in the order of Hooks called by CounterDisplay. This will lead to bugs and errors if not fixed.
```
**コード:**
```jsx
import React, { useState, useEffect } from 'react';
function CounterDisplay({ initialValue }) {
const [count, setCount] = useState(initialValue);
const [isEven, setIsEven] = useState(initialValue % 2 === 0);
if (count > 10) {
useEffect(() => {
console.log('Count exceeded limit!');
}, []);
}
useEffect(() => {
setIsEven(count % 2 === 0);
}, [count]);
return (
<div>
<h2>カウント: {count}</h2>
<p>{isEven ? '偶数です' : '奇数です'}</p>
<button onClick={() => setCount(count + 1)}>増加</button>
</div>
);
}
```
- 条件分岐内でuseEffectが使用されている
- useEffectの依存配列が正しくない
- setIsEvenの使用方法が間違っている
- useStateが連続して呼び出されている
- useEffectのコールバック関数の中でuseStateを呼び出している
Qraftユーザーの成績：正答率 64%（9/14回正解）
正解と解説を見る
このエラーは、if文の中でuseEffectフックを条件付きで呼び出していることが原因です。
【正解の理由】
Reactのフックは「トップレベルでのみ呼び出す」というルールがあり、条件分岐やループの中で呼び出してはいけません。`count`の値によってフックの呼び出し順序が変わってしまうため警告が出ています。修正するには、useEffectは常にトップレベルで呼び出し、条件分岐はその内部（コールバック関数の中）に書く必要があります。
【不正解の理由】
• useEffectの依存配列が正しくない：2つのuseEffectの依存配列（[]と[count]）はどちらも意図に沿った正しい指定である
• setIsEvenの使用方法が間違っている：`setIsEven(count % 2 === 0)`は真偽値を状態にセットする正しい呼び出し方である
• useStateが連続して呼び出されている：複数のuseStateをトップレベルで連続して呼び出すこと自体は問題のない一般的なパターンである
• useEffectのコールバック関数の中でuseStateを呼び出している：このコードにそのようなネストした呼び出しはなく、警告の原因ではない