技術質問
ReactのuseEffectが2回実行される問題
React 18にアップグレードしてからuseEffectが開発環境で2回実行されるようになりました。APIを2回叩いてしまっています。StrictModeの仕様だと聞きましたが、正しい対処法を教えてください。
@suzuki_infra
2025年02月06日 15:00
👁 719
💬 3 返信
// 3 REPLIES
I
@ito_frontend
2025/02/06 16:00
#1
React 18のStrictModeでは開発時に意図的にuseEffectを2回実行してバグを検出します。本番では1回しか実行されないので基本的には問題ありません。
K
@kobayashi_py
2025/02/06 18:00
#2
対処法としてはクリーンアップ関数でAbortControllerを使うのが正しい対応です。fetchのキャンセル処理をreturnで返すようにすると2回実行されても安全になります。
S
@suzuki_infra
2025/02/07 09:00
#3
どうしても1回にしたいなら開発時のみStrictModeを外すという方法もありますが、Reactチーム的には推奨していません。クリーンアップ関数で対応するのがベストです。