🗿

React18 から strict mode の注意点(レンダリング回数)

2022/04/20に公開約1,600字

レンダリングの検証をしていたところv18から変更点があったみたいなので書き留めておきます。既出ならすみません🙇🙇🙇

初回に2回マウントされるようになりました

React18からStrict modeの仕様が変更されました。
strict modeを有効にすると、コンポーネントを初回に2回マウントする仕様に変更になっています。

仕様変更の背景

コンポーネントを再マウントしても正しく描画されるかをチェックするために作られたみたいです

In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React would unmount and remount trees using the same component state as before.
This feature will give React apps better performance out-of-the-box, but requires components to be resilient to effects being mounted and destroyed multiple times. Most effects will work without any changes, but some effects assume they are only mounted or destroyed once.
To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

将来的には、Reactが状態を保持したままUIのセクションを追加・削除できるような機能を追加したいと考えています。例えば、ユーザーがタブで画面を離れて戻ってきたとき、Reactはすぐに前の画面を表示できるようにする必要があります。そのためにReactは、以前と同じコンポーネントの状態を使用してツリーのアンマウントと再マウントを行うことになる。
この機能により、Reactアプリのパフォーマンスはすぐに向上しますが、エフェクトが何度もマウントされたり破壊されたりすることに対してコンポーネントが耐性を持つことが必要になります。ほとんどのエフェクトは何の変更もなく動作しますが、一部のエフェクトは一度だけマウントまたは破壊されることを前提としています。
これらの問題を表面化させるために、React 18はStrict Modeに新しい開発専用のチェックを導入しています。この新しいチェックは、コンポーネントが初めてマウントされるたびに、すべてのコンポーネントを自動的にアンマウントおよび再マウントし、2回目のマウントで以前の状態を復元します。

参考

https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors

Discussion

ログインするとコメントできます