非厳密モードで useState を使用して複数のレンダリングが行われる理由

React で useState を使用すると、コンポーネントが複数回レンダリングされることに気づくかもしれません。この動作は、厳密モードを有効にしていなくても発生する可能性があるため、いくつかの説明が必要です。

[番号の変更] ボタンをクリックすると、追加のコンポーネントのレンダリングにより 2 つのコンソール ステートメント (「ここ」) が表示されます。この背後にある理由は、以前に示唆したように、厳密モードではありません。代わりに、React はダブル レンダーをトリガーして、より決定論的な開発環境を促進します。

React のドキュメントによると、開発における非厳密モードは次のことを行います:

• コンポーネント コンストラクターを意図的に呼び出します。レンダリングと状態アップデータ関数を 2 回実行します。
• 関数コンポーネントの本体と useState などのフックの呼び出しを 2 倍にします。

この 2 回のレンダリングにより、コード内の潜在的な副作用を検出する機会が得られます。 、パフォーマンスの問題やバグを早い段階で強調します。この追加のレンダリングは運用環境では発生しませんが、開発中の貴重なトラブルシューティング支援として機能します。