Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reactのトランジションを覗いてみる

ytaisei
January 24, 2025
890

 Reactのトランジションを覗いてみる

React Tokyo 第一回 で使用した資料です。

ytaisei

January 24, 2025
Tweet

More Decks by ytaisei

Transcript

  1. 自己紹介 • 株式会社AI Shift ◦ Webフロントエンド ◦ LLMを活用した新規事業 • 社会人1年目

    • 2社でBtoBアプリケーション開発 • 2024年は年間12本記事書きました
  2. 4つの実行フェーズ 1. Trigger Phase a. ReactDOMRoot.render()もしくはsetState()がTrigger フェーズの起因 2. Schedule Phase

    a. 実行されるタスクに優先順位を設定 する 3. Render Phase a. スケジュールされたタスクを実行し、 新しいFiber Treeを構築してDOMに変更が必要な対象を整理 4. Commit Phase a. 更新対象をDOMに反映
  3. 4つの実行フェーズ 1. Trigger Phase a. ReactDOMRoot.render()もしくはsetState()がTrigger フェーズの起因 2. Schedule Phase

    a. 実行されるタスクに優先順位を設定する 3. Render Phase a. スケジュールされたタスクを実行し、 新しいFiber Treeを構築してDOMに変更が必要な対象を整理 4. Commit Phase a. 更新対象をDOMに反映 Render Phaseが重たい
  4. まとめ 1. startTransition 関数を使用すると、 state の更新をトランジションとしてマーク することができる 2. トランジションとしてマークされた 更新タスクは優先度が低くなる

    3. 低い優先度のタスクは 一定の間隔でタスクを中断 し、中断した時点から再度 MacroTaskに登録してタスクを再開する