【解決】 React: Invariant Violation: Hooks can only be called inside the body of a function component の解決方法と原因 | React トラブルシューティング
1. React: Invariant Violation: Hooks can only be called inside the body of a function component とは?(概要と緊急度) React開発中に「Invariant Violation: Hooks can only be called inside the body of a function component」というエラーに遭遇し、驚いているかもしれません。ご安心ください、このエラーはReact開発者にとって非常によくあるもので、その原因と対処法は明確です。 このエラーは、React Hooks (useState, useEffect, useContextなど) を、Reactのルールに反する場所で呼び出したときに発生します。具体的には、以下のいずれかの状況で発生します。 関数コンポーネントまたはカスタムHookのトップレベルではない場所(例: if文、forループ、ネストされた関数の中など)。 通常のJavaScript関数やクラスコンポーネントの中。…