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

COMMENTS


Recommended

TITLE
CATEGORY
DATE
ランサムウェア攻撃グループ「REvil」のウェブサイトがオフラインに?
IT関連
2021-07-14 09:18
ワイモバ、eSIMを提供開始 3月17日から
企業・業界動向
2021-03-02 03:03
2021年の国内ITサービス市場はV字回復を予想–IDC
IT関連
2021-02-23 21:51
Javaアプリフレームワーク「Spring」に複数の脆弱性報告–未確認情報の交錯も
IT関連
2022-04-01 23:32
2人乗りの自律型デモ航空機「Maker」をArcher Aviationが公開、商業運航への「足がかり」に
モビリティ
2021-06-13 15:33
英国の競争・市場庁がアマゾンとグーグルのフェイクレビュー対応の調査を開始
IT関連
2021-06-27 08:25
Microsoftによる「フォールアウト」のZeniMax買収をEUが承認
企業・業界動向
2021-03-10 09:34
日立とサイファーマ、SUBARUのセキュリティ対策強化を支援
IT関連
2022-03-20 08:57
Adobeは新しいシンプルなデジタル資産管理ツールをローンチ
ソフトウェア
2021-04-29 23:32
noteにBASEが出資 「クリエイター支援を強化」
ネットトピック
2021-01-13 01:36
時代は“脱ハンコ”へ コロナ禍で進む「電子契約/電子署名」の将来 慶応大の手塚教授に聞く
PR
2021-08-18 02:09
広がるローコード開発–「次の段階に進む」とOutSystems
IT関連
2021-02-10 21:37
三菱商事とNTTデータ、国産RPAのグローバル展開で提携
IT関連
2021-07-01 05:14
Zendesk、メッセージング強化の統合型カスタマーサービス製品を提供開始
IT関連
2021-02-03 18:32