【ITニュース解説】🚀 Demystifying React Fiber: Advanced Guide to WIP, Commit Phase & Concurrent Rendering ⚛️

React Fiberは、Webアプリケーションのユーザーインターフェース（UI）を効率的に構築し、応答性を高めるためにReactの内部で機能する重要な仕組みである。従来のReactのレンダリング処理は一度始まると完了まで中断できないため、特に大規模なアプリケーションや複雑なUIにおいて、処理中にUIが一時的にフリーズしてしまう可能性があった。React Fiberは、この問題を解決し、レンダリング処理を中断可能にすることで、より滑らかで快適なユーザー体験を実現するために導入された。この記事では、このReact Fiberがどのように動作し、UIの更新を管理しているのかを、その主要な概念であるWIP（Work In Progress）ツリー、コミットフェーズ、そしてコンカレントレンダリングを中心に詳しく解説する。

Reactでアプリケーションを起動すると、まずアプリケーション全体を管理する「ルートFiber（HostRootFiber）」が作成される。このルートFiberを起点として、現在ブラウザに表示されているUIの構造に対応する「カレントFiberツリー」が構築される。しかし、ReactはUIの更新が必要になった際、すぐにUIを直接変更するのではなく、メモリ上で次に表示されるUIの候補となる「WIP（Work In Progress）Fiberツリー」を同時に構築し始める。つまり、ブラウザに表示されている最新のUIを表すカレントツリーと、将来のUI候補であるWIPツリーという二つのFiberツリーが存在する可能性がある。ルートFiber自体は一つだけだが、その子としてカレントツリーとWIPツリーを持つ構造になっている。

WIPツリーの構築が完了し、UIへの変更が確定されて実際に画面に反映されることを「コミット」と呼ぶ。コミットが成功すると、その時点で構築されていたWIPツリーが新しいカレントツリーとなる。もし新しいWIPツリーの構築中にさらなるUIの更新が要求された場合、Reactは状況に応じて二つの選択肢をとる。一つは、現在構築中のWIPツリーの一部を再利用して、中断したところからレンダリングを再開する方法である。もう一つは、進行中のWIPツリーを完全に破棄し、最初から新しいWIPツリーを構築し直す方法である。これは、ユーザーの入力など、より優先度の高い更新が到着した場合に、迅速な応答性を確保するために行われる。WIPツリーが途中で破棄されたとしても、ユーザーからの更新要求が失われることはなく、それらの情報はカレントツリーに付随する「更新キュー」に保存され、次のレンダリングで確実に処理されるようになっている。

React Fiberの最も重要な特徴の一つは、「中断可能なレンダリング（Interruptible Rendering）」をサポートすることである。これは、レンダリング作業が長期間にわたる場合、Reactが途中で処理を一時停止し、ブラウザが画面を更新したり、ユーザーの操作に反応したりする時間を与えることを意味する。例えば、ユーザーが入力フォームに文字を入力している最中に、バックグラウンドで重いUIのレンダリングが進行しているとする。Reactは、その重いレンダリングを一時停止し、ユーザーの入力に対応するUIを速やかに更新することで、アプリケーションの応答性を損なわないようにする。そして、次のフレームで、中断したWIPツリーの処理を再開するか、あるいはより優先度の高い更新があった場合はWIPツリーを破棄して新しいレンダリングを開始するかを判断する。

UIの一部、例えばあるコンポーネントの子要素の状態だけが変更された場合でも、Reactは必ずその更新されたコンポーネントの「親」から処理を開始し、Fiberツリーを辿っていく。これは、親コンポーネントのWIP Fiberが再構築され、その後、その子要素たちが順番に訪問されるためである。子要素が訪問される際には、既存のFiberを再利用するか（プロパティや状態に変更がない場合）、あるいは新しいWIP Fiberを作成するか（変更がある場合）が決定される。このプロセスにより、たとえ直接変更されていない兄弟要素であっても、レンダリングの効率化のために検証されることがある。

UIへの変更が決定されたWIPツリーは、最終的にブラウザの実際のDOM（Document Object Model、Webページの構造）に反映される「コミットフェーズ」へと移行する。このコミットフェーズは単にDOMを変更するだけでなく、三つの重要なステップから構成されている。最初のステップは「Before Mutationフェーズ」で、DOMが変更される前に特定の処理を行う。例えば、getSnapshotBeforeUpdateのようなライフサイクルメソッドがここで実行され、スクロール位置などのDOMの状態を測定し、後の処理のために保存することが可能である。次に「Mutationフェーズ」が行われる。このフェーズは同期的に実行され、途中で中断することはできない。ここでは、実際のDOMノードの作成、更新、削除といった変更がまとめて高速に適用される。例えば、複数の子DOMノードが一括で挿入されることで、パフォーマンスが向上する。最後のステップは「Layoutフェーズ」である。このフェーズでは、componentDidMountやcomponentDidUpdateといったライフサイクルメソッド、および「パッシブエフェクト（副作用）」のスケジューリングが実行される。これらの全てのステップが完了して初めて、ブラウザは新しいUIの状態を画面に描画するのである。

React Fiberの先進的な機能の一つとして、複数のWIPツリーが同時にメモリ上に存在しうるという点がある。これは、コミットフェーズの間ではなく、その「間」において可能である。ある瞬間には、ユーザーが現在見ている「カレント」のUIが存在し、それとは別に、一つまたはそれ以上の「次のUIの候補」となるWIPツリーがメモリ上で構築されている。ReactはこれらのWIP候補の中から、レンダリングの優先度や状況に応じて最適なものを選択し、コミットフェーズで実際のDOMに反映させる。他のWIPツリーは破棄される。例えば、あるWIPツリーの構築中に、より緊急性の高いユーザーの入力が到着した場合、Reactは進行中のWIPツリーを途中で破棄し、新しい高優先度なWIPツリーを構築して先にコミットすることで、高い応答性を保つことができる。

インクリメンタルレンダリングとコンカレントレンダリングは混同されがちだが、明確な違いがある。「インクリメンタルレンダリング（Incremental Rendering）」は、一つの大きなレンダリング作業を複数の小さな「チャンク（断片）」に分割して実行する手法である。各チャンクは短時間で実行され、その後Reactはブラウザに制御を戻す。これにより、重いレンダリング処理が進行中でもUIがフリーズすることなく、ユーザーの操作に対して応答性を維持できる。例えば、複雑なリストコンポーネントと軽いサイドバーコンポーネントがある場合、Reactはまずサイドバーをレンダリングし、その後リストのレンダリングをチャンクに分けて進める。もしリストのレンダリング中にユーザーがボタンをクリックした場合、Reactはリストの処理を一時中断して、クリックイベントを即座に処理できる。一方、「コンカレントレンダリング（Concurrent Rendering）」は、同じアプリケーションのルートに対して、複数のWIPツリーを同時にメモリ上で構築する能力を指す。これにより、Reactは低い優先度の作業を中断し、高い優先度の更新（例：ユーザー入力）を優先して処理し、先にUIに反映させることが可能になる。例えば、検索バーと重いフィードリストがあるアプリケーションで、ユーザーが検索バーに文字を入力した場合、Reactはフィードリストのレンダリング作業を一時停止し、検索バーの入力に対応する高優先度のWIPツリーを構築し、それを先にコミットする。その後、中断していたフィードリストのレンダリングを再開するか、あるいは新しい検索結果に対応するリストを構築し直す。つまり、インクリメンタルレンダリングは「一つのレンダリングを分割して実行する」ことであり、コンカレントレンダリングは「複数の異なるレンダリング作業（WIPツリー）を同時に管理し、優先度に応じてどれをコミットするかを決定する」能力である。

React Fiberは、タイムスライスされた中断可能なレンダリングを実現するための基盤である。すべてのUIの更新はまずメモリ上のWIPツリーで構築され、実際のDOM更新はコミットフェーズでのみ行われる。Reactは、更新の優先度に基づいてWIPツリーの構築を一時停止したり、再開したり、あるいは破棄したりする。コミットフェーズは、Before Mutation、Mutation、Layoutの三つの段階を経て実行される。そして、複数のWIPツリーが同時にメモリ上に存在し、その中から最適なものがコミットされることで、ユーザー入力のような重要な更新が迅速にUIに反映される。たとえWIPツリーが破棄されたとしても、更新キューによってユーザーの入力が失われることはない。これらのメカニズムが複合的に働くことで、Reactアプリケーションは常に高い応答性と滑らかなユーザー体験を提供できるのである。