Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

React 18からマウント時にuseEffectが2回呼ばれる訳じゃないよ

で囲まれてて」「開発ビルドのときだけ」マウント時にsetup→cleanup→setupと呼び出されるようになります。

あくまで検証用途

一見、マウント時にcleanupが走るのは無駄に思えますよね?その通りです。これは合理的な理由があってこうなるわけではありません。

では目的は何かというと、検証用です。実はReactは将来的にマウント/アンマウント時以外にもuseEffectを呼び出すようなAPIの導入を予定しています。

つまり、以下のコードはマウント時にのみ走るわけではなくなります。

useEffect(() => {
  // mount 時以外も呼ばれる可能性がある!
}, []);

(と言っても、Offscreen APIなどを使ったらそうなるというだけで、しばらくはマウント時にだけ走る、という認識でいいと思います)

こうなる予定があるので、マウントしてからアンマウントするまでに2回 useEffect が走っても問題ないのかを調べるためにこのような挙動が StrictMode に追加されたということらしいです。

実際、検証が目的なので production build ではこのような挙動は取りません。ご安心ください。