以下のコードを実行すると「Rendered more hooks than during the previous render」というエラーが発生します。原因として正しいものはどれですか？ function UserProfile({ isLoggedIn }) { if (isLoggedIn) { const [name, setName] = useState(''); } const [age, setAge] = useState(0); return <div>{age}</div>; }

解説

Reactは「Hooksは毎回同じ順番・同じ回数だけ呼ばれる」という前提で動いています。isLoggedIn が true のときは useState が2回呼ばれ、false のときは1回しか呼ばれません。レンダリングをまたいでHookの呼び出し回数が変わると、Reactは「前回と今回でHookの数が違う」と検知してエラーを投げます。他の選択肢はいずれもこのルールに違反しておらず、エラーの直接原因にはなりません。ReactがHookの順番を守らせる理由ReactはHookの状態を「呼び出された順番のリスト」として内部で管理しています。たとえば最初のレンダリングで useState が2回呼ばれたとき、Reactは「スロット1 = name、スロット2 = age」と記録します。次のレンダリングで呼び出し順が変わると、スロットの対応がずれてしまい、name の状態が age として読まれるなどのバグが起きます。そのためReactはあえてエラーにして、この状態を防いでいます。条件によって異なる値を扱いたい場合の正しい書き方Hookの呼び出し自体は常にトップレベルで行い、条件分岐はHookの内側に書くのが原則です。// NG: if文の中でHookを呼ぶ if (isLoggedIn) { const [name, setName] = useState(''); } // OK: Hookはトップレベルで呼び、条件はその後で判定する const [name, setName] = useState(''); const displayName = isLoggedIn ? name : '未ログイン';「ログイン時だけ必要なステートなのに、常に確保するのは無駄では？」と思うかもしれませんが、Reactのアーキテクチャ上これが正しいトレードオフです。本当にロジックを分離したい場合は、ログイン済みユーザー向けのコンポーネントを別に切り出す設計が有効です。eslint-plugin-react-hooksで未然に防ぐこのルール違反は eslint-plugin-react-hooks の rules-of-hooks ルールで静的解析時に検出できます。実務では必ず有効化しておくことで、実行前にミスを防げます。