フックの使い方が間違っている（React）
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. Rendered more hooks than during the previous render.
ひとことで言うと
「useState や useEffect（フック）は、決まった場所でしか使えないのに、別の場所で使っています」という意味です。
よくある原因
- if 文や for 文の中でフックを使っている
- コンポーネントの外（ふつうの関数の中）で使っている
- React が2つ入っている
自分で確かめること
- フックが、コンポーネントの一番上で、if などの外にあるか見る
たいていは、こうすると直ります
フックはコンポーネントの一番上にまとめて書き、条件で分けたいときは、フックの中で分けます。
AIへの伝え方
下の文をコピーして、ChatGPT・Claude・Cursor などに貼り付けてください。トップで貼り付けたエラー文があれば、自動でそれに入れかわります。
次のエラーが出て困っています。プログラミング初心者にもわかるように、原因と直し方を教えてください。必要なら、直したコードも全部見せてください。 【エラー】 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. Rendered more hooks than during the previous render. 【やったこと】 （ここに、エラーが出る前にしたことを書く。例：npm run dev を実行した） 【参考】 このエラーは「フックの使い方が間違っている（React）」というもので、よくある原因は次のとおりです。 ・if 文や for 文の中でフックを使っている ・コンポーネントの外（ふつうの関数の中）で使っている ・React が2つ入っている どれに当てはまるかを確かめる方法も教えてください。