React の開発モードで useState() が二重レンダリングをトリガーするのはなぜですか?

開発モードで useState() が二重レンダリングを引き起こすのはなぜですか?

React では、状態管理に useState を使用すると、状態中に 2 つのレンダリングがトリガーされる場合があります更新情報。この動作は、潜在的な副作用をシミュレートすることで開発デバッグを強化する React の Strict モードに起因すると考えられます。

次のコード スニペットを検討してください。

import React, { useState } from "react";
...
const [number, setNumber] = useState(0);
...
function changeNumber() {
    setNumber(state => state + 1);
}
...

changeNumber 関数をトリガーするボタンをクリックすると、コンポーネントの再レンダリングを通知する 2 つのコンソール ログが観察される場合があります。これは、開発環境で useState updater などの関数を強制的に 2 回実行する Strict モードによるものです。

React のドキュメントでは、Strict モードでは、状態アップデータ関数などの特定の関数を意図的に再呼び出しすることで潜在的な副作用を検出し、強調表示すると説明されています。 useState に渡されるものと同様です。目的は、デバッグを容易にし、確実な動作を確実にすることです。

この二重レンダリングを軽減するには、アプリケーションのエントリ ポイントから次のコードを削除してストリクト モードを無効にします。

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

以上がReact の開発モードで useState() が二重レンダリングをトリガーするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。