ESLintプラグイン eslint-plugin-react-hooks の rules-of-hooks ルールが違反を報告するケースとして、正しいものはどれですか？

解説

正解はif文の中でuseStateを呼び出しているです。eslint-plugin-react-hooksのrules-of-hooksルールは、React Hooksの呼び出し方がルールに違反していないかを検証します。useState、useEffect、useMemoなどのHookは、関数コンポーネントまたはカスタムHookのトップレベルで呼び出す必要があります。たとえば、if (isLoggedIn) { useState(false); }のように条件分岐の中でHookを呼び出すと、レンダリングごとにHookの呼び出し順序が変わる可能性があります。ReactはHookが呼ばれた順序を使ってstateやeffectを対応付けているため、順序が変わるとstateの管理が正しく行えなくなります。useStateを1つのコンポーネントで複数回使うことは正常です。また、useEffectの依存配列に必要な値が含まれているかを検証するのは、主にexhaustive-depsルールの役割です。rules-of-hooksでは、条件分岐・ループ・イベントハンドラなどの中でHookを呼び出さず、毎回同じ順序でHookを実行できるようにすることが重要です。