Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactのトランジションを覗いてみる
Search
ytaisei
January 24, 2025
1
1.4k
Reactのトランジションを覗いてみる
React Tokyo 第一回 で使用した資料です。
ytaisei
January 24, 2025
Tweet
Share
More Decks by ytaisei
See All by ytaisei
Deep Dive Into React 〜React Fiber Architectureについて〜
ytaisei
1
94
React19で状態管理はどう変わるか
ytaisei
2
120
TanStackで効率的なルーティングとデータ取得を実現
ytaisei
8
1.5k
TanStack Routerで型安全かつ効率的なルーティングを実現
ytaisei
4
1.7k
BunがCommonJSをサポートする理由
ytaisei
2
290
TanStack Router SPA開発の選択肢になるか(+TanStack Query)
ytaisei
2
1.3k
【2023】SWR vs TanStack Query
ytaisei
1
2k
React Queryは非同期の状態管理ライブラリだ
ytaisei
3
1.8k
アウトプットが与える影響 〜価値を最大化するための学習サイクル〜
ytaisei
2
1.9k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
69
4.7k
Typedesign – Prime Four
hannesfritz
41
2.6k
4 Signs Your Business is Dying
shpigford
183
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
176
52k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Speed Design
sergeychernyshev
28
840
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Bash Introduction
62gerente
611
210k
Testing 201, or: Great Expectations
jmmastey
42
7.3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Music & Morning Musume
bryan
46
6.4k
Transcript
Reactのトランジションを覗いてみる 安井大晟(ytaisei_)
自己紹介 • 株式会社AI Shift ◦ Webフロントエンド ◦ LLMを活用した新規事業 • 社会人1年目
• 2社でBtoBアプリケーション開発 • 2024年は年間12本記事書きました
アジェンダ 1. Reactのレンダリングについて 2. startTransitionについて 3. トランジションとそうでない場合の違い 4. 図解してみる 5.
まとめ
Reactのレンダリングをおさらいする
Reactのレンダリングをおさらいする https://jser.dev/2023-07-14-initial-mount/#1-brief-introduction-on-fiber-architecture Reactは内部でFiber Treeを構築して 差分の更新を最小限に抑えている
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に反映
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が重たい
startTransitionについて
startTransition API https://ja.react.dev/reference/react/startTransition startTransition 関数を使用すると、 state の更新をトランジションとしてマー クすることができます。
startTransition API https://ja.react.dev/reference/react/startTransition startTransition 関数を使用すると、 state の更新をトランジションとしてマー クすることができます。 トランジションとしてマークするとは?
トランジションとそうでない場合の違い
Reactのレンダリングをおさらいする トランジションとしてマークされていない場合: デモのリンク トランジションとしてマークされた場合: デモのリンク 非常に重たいタブを配置
トランジションとしてマークされていない場合 Reactはレンダリングが完了されるまで 同期的に実行するため、 UIがブロッキングされてしまう。
トランジションとしてマークされた場合 実行されるタスクが細切れに分割され、 ユーザのイベントを受け付けることができる
図解してみる
トランジションとしてマークされていない場合
トランジションとしてマークされた場合 タスクが細かく分割されている
まとめ
まとめ 1. startTransition 関数を使用すると、 state の更新をトランジションとしてマーク することができる 2. トランジションとしてマークされた 更新タスクは優先度が低くなる
3. 低い優先度のタスクは 一定の間隔でタスクを中断 し、中断した時点から再度 MacroTaskに登録してタスクを再開する
まとめ 1. startTransition 関数を使用すると、 state の更新をトランジションとしてマークすることができる 2. トランジションとしてマークされた更新タスクは優先度が低くなる 3. 低い優先度のタスクは一定の間隔でタスクを中断し、中断した時点から再度
MacroTaskに登録してタスクを再開する その結果重たいstate更新の処理中もユーザのイベントを受け付けることができる
ご清聴いただきありがとうございました! 詳しい内容はこちらまで