React 18正式版リリース。コアとなるレンダリングモデルに並行処理を導入、レンダリング速度、サーバサイドレンダリング速度の向上などを実現

今回は「React 18正式版リリース。コアとなるレンダリングモデルに並行処理を導入、レンダリング速度、サーバサイドレンダリング速度の向上などを実現」についてご紹介します。

関連ワード （必要、部分、高速等） についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。

JavaScript対応のUIライブラリである「React 18」正式版がリリースされました。

React 18はAutomatic Batching、Server-Side Renderingの速度向上などをはじめとする機能強化が行われています。

Automatic Batchingでは、連続してステートの変更が行われる場合、そのたびにレンダリングの処理が走っていたところを、まとめて一回のレンダリング処理が走るだけになることで、速度が向上するというもの。

React 18以前では、Reactのイベントハンドラによる連続処理では、このようなレンダリングのまとめが行われていましたが、React 18では「createRoot」を用いることで、あらゆるステートの変更に対してこうした処理が行われるようになります。

React 18 adds automatic batching. Batching is when React combines multiple setState() calls into a single re-render to improve performance.

Previously, React only batched updates inside event handlers. In React 18, more updates are batched by default, improving performance. pic.twitter.com/4dhmSRmj68

— React (@reactjs) March 29, 2022

Server-Side Renderingでは、「Streaming HTML」と「Selective Hydration」によって速度向上が実現されます。

Streaming HTMLは、サーバサイドでHTMLを生成する際に、すべてのデータが揃わなくとも、データがかけているところはプレースホルダを置いてHTMLを生成してクライアントに投げてしまい、データが取得できたタイミングであとからプレースホルダを実際のデータに置き換える、という処理をReactが行ってくれる、というもの。

サーバがデータ取得の途中でもクライアントでHTMLを受け取って表示を開始できるため、見かけ上の性能が向上します。

If you wait for some data to load on the server, React can now stream HTML for the fallback (for example, a spinner) and let the user see the rest of the page. When the data is ready, React sends the content HTML along with a <script> tag to insert it into the right place. pic.twitter.com/7fcovPmbeo

— React (@reactjs) March 29, 2022

Selective Hydrationは、クライアントのHTMLにイベントハンドラをアタッチする場合、アタッチする部分を見つけるために必要とされるHTMLのレンダリングを行うJavaScriptが全部読み込まれていなくとも、先にレンダリング可能なところからイベントハンドラをアタッチしていく処理を可能にする、というものです。

これも読み込みの遅いJavaScriptに処理をブロックされることが減るため、速度の向上につながります。

Suspense also enables selective hydration. React 18 can start hydrating the HTML before all JavaScript code loads. Specifically, content wrapped in <Suspense> will not block the rest of the page from hydrating! If you start interacting, React will prioritize hydrating that area. pic.twitter.com/3bLbbW5y4x

— React (@reactjs) March 29, 2022

こうした新機能はReactのコアとなるレンダリングモデルに並行処理を持ち込んだことにより実現されていると説明されています。これにより従来の単一処理で割り込みできず、同期的な処理によるレンダリングよりも柔軟で高速な処理が可能になっているとのことです。