useState が Strict モードでコンポーネントを 2 回レンダリングするのはなぜですか?

useState の二重レンダリングについて

React では、コンポーネントの状態を管理するために useState フックがよく使用されます。ただし、特定の条件下では、useState でレンダリングされたコンポーネントが状態の更新ごとに 2 回レンダリングされることに気づく場合があります。この動作は、厳密モードを有効にしていない多くの開発者を混乱させています。なぜこのようなことが起こるのでしょうか?

Strict モードの役割

Strict モードが有効になっていないという想定に反して、コードは実際にはその制約の下で実行されています。デフォルトでは、React の最新バージョンは、最も外側のコンポーネントを で暗黙的にラップします。要素。このモードはデバッグを強化し、潜在的なパフォーマンスの問題を強調します。

Strict モードでの二重関数呼び出し

React のドキュメントには、Strict モードでは特定の関数を意図的に「二重呼び出し」すると明示されています。これには、setState および useState に渡される状態アップデーター関数が含まれます。これは、コード内で setNumber を呼び出すたびに、setNumber が 2 回呼び出されることを意味します。

二重呼び出しの結果

この二重呼び出しにより、コンポーネントが 2 回レンダリングされます。この動作は、開発者が潜在的な副作用をより決定論的に特定できるようにすることを目的としています。デフォルトでは、React は useState フックを使用するときに更新を延期します。ただし、Strict モードではこの動作がバイパスされ、レンダリングが 2 回発生します。

結論

要約すると、useState を使用したコンポーネントの二重レンダリングは、 React の Strict モードでのコード。予想外に見えるかもしれませんが、この動作は意図的であり、副作用をより明確にしてデバッグ機能を強化するように設計されています。

以上がuseState が Strict モードでコンポーネントを 2 回レンダリングするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。