Reactのフックを使っていたら以下のエラーが発生した
Error: Rendered more hooks than during the previous render.
ブラウザのコンソールには直前に以下のログがでていて
Warning: React has detected a change in the order of Hooks called by SamplePage. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks
リンクがあるので読むと「React はフックが呼ばれる順番に依存している」ので、毎回同じ順序、同じ回数だけ実行しなければないとのこと
実装で問題だったのはNext.jsのisFallback
の機能を使っている箇所
export default function SamplePage(props: Props) { const router = useRouter(); const { isFallback, query } = router; if (isFallback) { return <div>Loading...</div>; } const { currentUser } = useContext(AuthContext); const [foo, setFoo] = useState<string>(""); const [bar, setBar] = useState<string>(""); }
isFallback
の条件によってそれより下のフックが呼ばれない場合があり、フックが呼ばれる回数がレンダリングのたびに変わっていたのが原因だった
わけあってこうしていたのだが、すべてのフックが呼ばれた後にローディング中を返すようにしたらエラーと警告が解消された
const router = useRouter(); const { isFallback, query } = router; const { currentUser } = useContext(AuthContext); const [foo, setFoo] = useState<string>(""); const [bar, setBar] = useState<string>(""); if (isFallback) { return <div>Loading...</div>; }
わけあっての部分は考え直す
参考
isFallbackについて
Basic Features: Data Fetching | Next.js