React Hooks 前のレンダリング時よりも多くのフックをレンダリングしました。

Question

React Hooksを使っていたら

uncaught Invariant Violation: Rendered more hooks than during the previous render.

上記のエラーが出ました。
これはどういう時に起こるエラーなのでしょうか？

Comments

[m.ts10806]

回答依頼いただきましたがReactもTypeScriptも専門外なのでアドバイスは難しそうです。
エラーで調べたり、実際のコードや環境など具体的に記載するとアドバイスもつきやすくなると思います。

Answer 1

エラーメッセージのとおりです。Hooks関数は、毎回同じ順序、同じ回数だけ実行しなければなりません。

useXxx関数を条件やループに入れたり、手前でreturnしてしまったりするとこういうエラーとなります。

フックのルール - React公式