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
2.3k
Reactのトランジションを覗いてみる
React Tokyo 第一回 で使用した資料です。
ytaisei
January 24, 2025
Tweet
Share
More Decks by ytaisei
See All by ytaisei
TanStack Routerを新規プロダクトで1年間運用してみた結果
ytaisei
1
170
Reactを段階的に覗いてみる
ytaisei
3
1.7k
Deep Dive Into React 〜React Fiber Architectureについて〜
ytaisei
2
310
React19で状態管理はどう変わるか
ytaisei
2
180
TanStackで効率的なルーティングとデータ取得を実現
ytaisei
9
2.1k
TanStack Routerで型安全かつ効率的なルーティングを実現
ytaisei
4
2.3k
BunがCommonJSをサポートする理由
ytaisei
2
400
TanStack Router SPA開発の選択肢になるか(+TanStack Query)
ytaisei
2
1.5k
【2023】SWR vs TanStack Query
ytaisei
1
2.1k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Being A Developer After 40
akosma
91
590k
A better future with KSS
kneath
239
18k
Facilitating Awesome Meetings
lara
57
6.6k
Unsuck your backbone
ammeep
671
58k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
How STYLIGHT went responsive
nonsquared
100
5.9k
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更新の処理中もユーザのイベントを受け付けることができる
ご清聴いただきありがとうございました! 詳しい内容はこちらまで