react-hooks/set-state-in-effect が主に検出するコードはどれですか？

解説

正解は 「useEffectの処理内で同期的にstateを更新するコード」 です。react-hooks/set-state-in-effect とはuseEffectのコールバック内で同期的にsetStateを呼び出しているコードを検出するlintルールです。useEffect(() => { setMode("a") // 同期的 → 検出される }, [deps])「同期的に」とはuseEffectのコールバックが実行されてからreturnするまでの間に、setStateに到達するかどうかです。// 同期的（検出される） useEffect(() => { setMode("a") // コールバックの実行フロー内で即呼ばれる }, []) // 非同期（検出されない） useEffect(() => { fetch("/api").then((res) => { setMode(res.mode) // コールバックの実行が終わった後、別のタイミングで呼ばれる }) }, [])非推奨な理由同期的にsetStateを呼ぶと、必ずレンダーが2回走ります。const [mode, setMode] = useState<"a" | "b">("b") useEffect(() => { setMode("a") }, [])初回レンダー → "b"で描画useEffect発火 → setMode("a") → 再レンダー → "a"で描画ステップ1は無駄な描画です。最初から"a"にしたいなら初期値に渡せば1回で済みます。const [mode, setMode] = useState<"a" | "b">("a")他の選択肢が不正解な理由クリックイベント内でstateを更新するコード → イベントハンドラ内のsetStateは通常の使い方であり、このルールの対象外です。useStateで初期値を設定するコード → むしろこのルールで検出されたコードの修正先です。propsを子コンポーネントへ渡すコード → stateの更新とは無関係です。https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-effect