useState での二重レンダリングについて理解する

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

厳密モードの役割

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

Strict モードでの Double Function Invocation

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

二重呼び出しの結果

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

結論

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