React の開発モードで StrictMode を有効にしているとき、useEffect の処理が2回実行される主な理由はどれですか

解説

正解は「StrictMode が開発時だけ、意図的にマウント→アンマウント→再マウントを行い、クリーンアップ漏れを検出するため」です。React 18 以降の <StrictMode>（開発時のバグ検出用のコンポーネント）は、開発モードに限って各コンポーネントを一度余分にマウントし直します。その結果、useEffect の処理 → クリーンアップ関数 → もう一度処理、という順で動きます。なぜわざと2回動かすのかエフェクトは何度実行されても壊れないように書くのが原則です。React はあえて2回動かすことで、後片付け（クリーンアップ）を書き忘れた箇所を開発中に表面化させます。useEffect(() => { const id = setInterval(tick, 1000); // 2回目のマウントでタイマーが増える return () => clearInterval(id); // これが無いと2本走り続ける }, []);ビルド後の本番では2回実行されませんこの挙動は開発ビルド専用です。「2回動くのを止めたいから StrictMode を外す」のは、バグを隠すだけで解決になりません。API リクエストが2回飛ぶのが困る場合は、AbortController でリクエストを中断するか、データ取得ライブラリに任せるのが実務的な対処です。他の選択肢について「React 18 から useEffect の依存配列の比較が厳密になり」…依存配列の比較は従来どおり Object.is による比較で、変更されていません。「開発サーバーの Fast Refresh が」…Fast Refresh はファイル保存時の話で、初回読み込み時の2回実行とは無関係です。「第2引数（依存配列）を省略すると」…省略した場合はレンダーのたびに毎回実行されるだけで、2回に固定されるわけではありません。参考<StrictMode> – ReactuseEffect – React