【ITニュース解説】React Scheduler & Fiber Architecture Explained: Time Slicing, Concurrent Rendering & WIP Management 🚀

Reactはユーザーインターフェース（UI）の更新を効率的に管理し、アプリケーションをスムーズで応答性の高い状態に保つための強力な仕組みを持っている。その中心となるのが「スケジューラ」と「Fiberアーキテクチャ」だ。スケジューラはまるでUI更新のスーパー効率的なプロジェクトマネージャーのように、いつ、どのような順序で、どの作業を行うかを決定する。これにより、タイムスライシング、コンカレントレンダリング、インクリメンタルレンダリングといった現代的な機能が実現される。

タイムスライシングとは、大量の作業を小さな塊に分割し、その間にUIの応答性を保つ技術である。コンカレントレンダリングは、メインスレッドをブロックすることなく、UIの複数の部分を並行してレンダリングすることを可能にする。また、インクリメンタルレンダリングは、UIを段階的に更新し、緊急度の高い更新を優先させる仕組みだ。スケジューラは、これらの機能を可能にする「エンジン」であり、タスクの優先順位を管理し、必要に応じて作業を一時停止したり再開したりする。

UIの更新は、ユーザーが入力ボックスに文字を入力したり、ボタンをクリックしたりするなどの操作からトリガーされる。このとき、Reactは状態更新を受け取り、変更される可能性のあるコンポーネントごとに「Fiberオブジェクト」という小さな作業単位を作成する。各Fiberは、コンポーネントの種類、プロップス（渡されるデータ）、状態、子コンポーネントや兄弟コンポーネントとの関係、そして更新キューといった情報を含んでいる。

次に、スケジューラはこれらの作業の優先順位を決定する。ユーザー入力やアニメーションなどの緊急性の高い作業は「高優先度」、ネットワークからの応答やバックグラウンドタスクなどは「低優先度」として区別される。スケジューラは、ブラウザのAPI（例えばrequestIdleCallback）を利用して、低優先度の作業を一時停止し、高優先度の更新を先に処理することで、UIがフリーズするのを防ぐ。タイムスライシングは、この段階で大きな更新を小さな塊に分割し、Reactがそれぞれの間に制御を解放できるようにする。コンカレントレンダリングは、レンダリングをブロックせずに複数の更新を処理し、インクリメンタルレンダリングは、必要な更新のみをコミットし、他の更新は適切なタイミングまで待機させることを可能にする。

Reactのすべてのコンポーネントは、Fiberノードとして表現される「Fiberツリー」という設計図を形成する。各Fiberノードは、その子、兄弟、そして親（return）へのポインタを持ち、現在の状態や保留中のプロップス、更新キューなどの情報を含んでいる。スケジューラはこのツリーをたどりながら、どのFiberを更新すべきかを決定する。

スケジューラが実際に作業を行うのが「ワークループ」だ。更新キューからFiberを選択し、レンダリング作業を実行する。これには、新しい仮想DOMを計算し、既存の仮想DOM（古いFiberツリー）と新しい仮想DOM（新しいFiberツリー）を比較する「Reconciliation（調整）」というプロセスが含まれる。もし時間が足りなくなった場合、Reactは現在の作業を一時停止し、残りのタスクを保存してメインスレッドを解放する。これにより、UIが常に応答性を保つことが保証される。

Reconciliationフェーズでは、古いFiberツリーと新しいFiberツリーを詳細に比較し、変更点を見つけ出す。Fiberに変更がなければ更新をスキップし、変更があればコミット対象としてマークする。新しいFiberは配置のためにマークされ、削除されたFiberは削除のためにマークされる。このようにして、実際に変更された部分のFiberだけが最終的にDOM（Webページを構成する要素）に反映されるため、高コストなDOM操作を最小限に抑えることができる。

変更が検出された後、「コミットフェーズ」で実際のDOMへの変更が適用される。このフェーズは同期的に実行され、いくつかのサブフェーズに分かれる。まず「Before Mutationフェーズ」では、クラスコンポーネントのgetSnapshotBeforeUpdateメソッドが実行され、DOMが変更される前のレイアウト情報を読み取る機会を提供する。次に「Mutationフェーズ」で、レンダリングフェーズで計算された変更が実際のDOMノードに適用される。その後、「Layout Effectsフェーズ」でuseLayoutEffectフックが実行される。これはDOM更新後、ブラウザが画面を描画する前に行われ、レイアウトの読み取りや視覚的な調整を同期的に行うのに役立つ。最後に「Passive Effectsフェーズ」でuseEffectフックが実行される。これはブラウザが画面を描画した後に非同期で行われる。

Reactは、作業中のFiber（WIP: Work-in-Progress）を一時停止したり、再開したり、破棄したり、再作成したりして柔軟に管理する。メインスレッドが他の作業で忙しい場合や、より優先度の高い更新が到着した場合、現在のWIPは一時停止され、作業中のツリーに保存される。ブラウザがアイドル状態になった次の機会に、スケジューラは一時停止した作業を再開する。もしWIPが不要になった場合は破棄され、プロップスや状態に大きな変更があった場合はFiber作業が再作成されることもある。また、単一のFiberに対して複数のWIPが存在する可能性もあり、スケジューラは常に最も優先度の高いWIPを処理する。このWIP管理システムによって、タイムスライシング、コンカレントレンダリング、インクリメンタルレンダリングといった機能が実現されている。

更新作業には「優先度レーン」が割り当てられる。例えば、キー入力やクリックのような緊急性の高い更新は「Syncレーン」、スクロールやポインターの動きは「InputContinuousレーン」、通常の更新は「Defaultレーン」、バックグラウンドタスクは「Idleレーン」といった具合だ。スケジューラはこれらのレーンの優先度に基づいて、どのWIPを処理し、いつ一時停止するかを決定する。

ReactのHooksもこのスケジューラと密接に連携している。useStateやuseReducerを使った状態更新は、対応するFiberの更新キューに追加され、スケジューラがそのキューをいつ処理するかを決定する。useLayoutEffectはレイアウトフェーズ、つまりブラウザが描画する前に同期的に実行され、useEffectはパッシブフェーズ、つまり描画後に非同期に実行される。

このように、Reactは更新作業をFiberという小さな単位に分割し、スケジューラがその優先度と実行タイミングをきめ細かく制御することで、UIの滑らかな動作を保証する。レンダリングフェーズは中断可能である一方で、コミットフェーズは確実に同期的に実行される。変更されたFiberのみがDOMにコミットされ、WIP管理システムを通じてタイムスライシングなどの高度な機能が提供される。Reactは、まるで複数のタスクを効率的にこなすスマートな管理者であり、複雑な更新があってもアプリケーションを応答性の高い状態に保ち続ける。