【React】useEffectやuseState使用時に「Rendered more hooks than during the previous render」のエラーが発生 - Qiita

概要 表題のエラーについて、Reactをやったことある人であれば、一度は見かけたことがある内容かもしれません。私はいまだに、このReactのエラー仕様をド忘れしてハマることがあるので、今回は備忘でメモ書きします。 どういう時に発生するのか こちらのteratailの記事にある通り、「useXxx関数を条件やループに入れたり、手前でreturnしてしまったりするとこういうエラー」となります。NGパターンの詳細については、Rendered more hooks than during the previous render (React)の記事でも解説されています。 例えば以下のようなソースでは、useEffectの手前で条件式でreturnしてしまってるので、エラーになります。 import { useContext, useEffect } from "react"; import { u