React入門 練習問題 21：Hooksの呼び出しルール
Reactにおいて、Hooks（useStateやuseEffectなど）を使用する際の正しいルールはどれか。
- Hooksはコンポーネントのトップレベルでのみ呼び出し、ループや条件分岐の中では呼び出してはならない
- Hooksはクラスコンポーネントの中でのみ使用でき、関数コンポーネントでは使用できない
- Hooksは1つのコンポーネントにつき1つしか使用できず、複数回呼び出すことはできない
- Hooksはコンポーネントの外側でのみ定義し、内部から呼び出してはならない
- Hooksはif文の中でのみ使用可能で、通常の処理フローでは使用できない
正解と解説を見る
正解：Hooksはコンポーネントのトップレベルでのみ呼び出し、ループや条件分岐の中では呼び出してはならない
React の Hooks には「呼び出しのルール（Rules of Hooks）」と呼ばれる制約があり、常にコンポーネントのトップレベルで呼び出す必要があります。
【正解の理由】
Hooksはループ・条件分岐・ネストした関数の中で呼び出すと、レンダリングのたびに呼び出される順序が変わってしまい、Reactが内部でstateを正しく紐付けられなくなります。そのため常にトップレベルで、同じ順序で呼び出す必要があります。
【不正解の理由】
• 「クラスコンポーネントの中でのみ使用でき、関数コンポーネントでは使用できない」：実際は逆で、Hooksは関数コンポーネント専用の仕組みであり、クラスコンポーネントでは使用できない
• 「1つのコンポーネントにつき1つしか使用できず」：同じ種類のHookを1つのコンポーネント内で複数回呼び出すことは可能（例：useStateを複数回使う）
• 「コンポーネントの外側でのみ定義し」：Hooksはコンポーネント関数の内部で呼び出すのが基本であり、外側での定義は用途が異なる
• 「if文の中でのみ使用可能」：条件分岐の中での呼び出しはむしろ禁止されているルールに反する