React 18リリース候補版が公開。Automatic BatchingやServer-Side Renderingのストリーミング対応による速度向上、IE対応の終了など

今回は「React 18リリース候補版が公開。Automatic BatchingやServer-Side Renderingのストリーミング対応による速度向上、IE対応の終了など」についてご紹介します。

関連ワード （ライブラリ、処理、連続処理等） についても参考にしながら、ぜひ本記事について議論していってくださいね。

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

JavaScript対応のUIライブラリである「React」の最新版、「React 18」のリリース候補版が公開されました。

Our next major version, React 18, is available as a Release Candidate. If you’d like to help us prepare for the stable release, follow this upgrade guide and let us know if you find any issues! https://t.co/PrgSEgNq3L

— React (@reactjs) March 8, 2022

React 18では、Automatic Batchingと呼ばれる機構が追加されました。

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

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

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

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

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

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

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

またReact 18からはInternet Explorerのサポートもなくなります。

React 18の正式版は、今回のリリース候補版のリリースから2週間～4週間後に登場予定となっています。