JSConf JP
JAEN

React Fiber Unplugged: How the Internal Scheduler Shapes React

セッショントラックAEnglish

Reactのレンダリング処理の裏側には、常に意思決定を行うスケジューラが存在します。次に何を実行するか、何を中断するか、何を破棄するか、そして何を優先するか。アプリが負荷がかかったときに高速に動作したり、動作が不安定になったりするのは、通常、コンポーネントのコードではなく、これらのスケジューラの決定によるものです。しかし、多くの開発者は未だに、Fiberが登場する以前の思考モデルに基づいてReactのパフォーマンスを理解しようとしています。

この講演では、Fiberとそのスケジューラの内部構造について解説します。作業がどのように単位に分割されるか、優先度レーンによって何が最初に実行されるかがどのように決定されるか、タイムスライシングによってReactがレンダリングの途中でブラウザに処理を委譲できる仕組み、そしてFiber以前の最適化手法の一部が現在では逆効果になる理由などを説明します。

実際に動作が不安定なコンポーネントを一つ取り上げ、スケジューラの処理を段階的に追跡します。再レンダリングがトリガーされる原因、Reactがそれを中断するかどうかをどのように判断するか、そしてuseTransitionやuseDeferredValueを導入すると具体的に何が変わるのかを解説します。解説内容はすべて、私の9部構成の「How React Works」シリーズに基づき、Reactの内部構造と照らし合わせて検証済みです。

この講座を受講することで、盲目的に適用するヒントのリストではなく、なぜ特定のパフォーマンス改善策が効果を発揮し、他の改善策が効果を発揮しないのかを説明できる、スケジューラの実用的なメンタルモデルを身につけることができます。