ダボハゼのブログ
目次
エラー概要
Reactで「React has detected a change in the order of Hooks called by〜 . This will lead to bugs and errors if not fixed.」のエラーが発生した場合の対処法です。
上記エラーは、useStateなどのHooksが呼び出される順序が変わったときに発生するそうです。
Reactでは、Hooksはトップレベルで呼び出す必要があります。
フックをループや条件分岐、あるいはネストされた関数内で呼び出してはいけません。代わりに、あなたの React の関数のトップレベルでのみ、あらゆる早期 return 文よりも前の場所で呼び出してください。これを守ることで、コンポーネントがレンダーされる際に毎回同じ順番で呼び出されるということが保証されます。これが、複数回
useStateやuseEffectが呼び出された場合でも React がフックの状態を正しく保持するための仕組みです
参考：https://ja.legacy.reactjs.org/docs/hooks-rules.html
そのため、if文や下記のような早期return文の後にHooksを書くとHooksの順序が変わってしまいエラーが発生します。
import { useEffect, useState } from "react";
const Sample = ({ count }: { count: number }) => { const [flag1, setFlag1] = useState(true); if (count === 0) { return <></>; } const [flag2, setFlag2] = useState(true); return <>{count}</>;
};
export default Sample;対処法その1：Hooksは関数のトップレベル、早期return文より前に書く
Hooksは条件分岐内や早期return文の後ではなく、トップレベルに書く必要があります。
下記のように、早期return文より前にHooksを書けばエラーは発生しなくなります。
"use state";
import { useEffect, useState } from "react";
const Sample = ({ count }: { count: number }) => { const [flag1, setFlag1] = useState(true); const [flag2, setFlag2] = useState(true); if (count === 0) { return <></>; } return <>{count}</>;
};
export default Sample;対処法その2：コンポーネントとして切り出す
下記のように、コンポーネントとして切り出した場合もエラーは発生しません。
import { useEffect, useState } from "react";
const Parent = ({ count }: { count: number }) => { const [flag1, setFlag1] = useState(true); if (count === 0) { return <></>; } return <Children count={count} />;
};
const Children = ({ count }: { count: number }) => { const [flag2, setFlag2] = useState(true); return <>{count}</>;
};
export default Parent;そもそもの話
VSCodeでeslintの設定されていれば、コード書いているときに以下のようにエラーを表示してくれるので気付ける。
React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！
