Slide 1

Slide 1 text

Reactのトランジションを覗いてみる 安井大晟(ytaisei_)

Slide 2

Slide 2 text

自己紹介 ● 株式会社AI Shift ○ Webフロントエンド ○ LLMを活用した新規事業 ● 社会人1年目 ● 2社でBtoBアプリケーション開発 ● 2024年は年間12本記事書きました

Slide 3

Slide 3 text

アジェンダ 1. Reactのレンダリングについて 2. startTransitionについて 3. トランジションとそうでない場合の違い 4. 図解してみる 5. まとめ

Slide 4

Slide 4 text

Reactのレンダリングをおさらいする

Slide 5

Slide 5 text

Reactのレンダリングをおさらいする https://jser.dev/2023-07-14-initial-mount/#1-brief-introduction-on-fiber-architecture Reactは内部でFiber Treeを構築して 差分の更新を最小限に抑えている

Slide 6

Slide 6 text

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に反映

Slide 7

Slide 7 text

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が重たい

Slide 8

Slide 8 text

startTransitionについて

Slide 9

Slide 9 text

startTransition API https://ja.react.dev/reference/react/startTransition startTransition 関数を使用すると、 state の更新をトランジションとしてマー クすることができます。

Slide 10

Slide 10 text

startTransition API https://ja.react.dev/reference/react/startTransition startTransition 関数を使用すると、 state の更新をトランジションとしてマー クすることができます。 トランジションとしてマークするとは?

Slide 11

Slide 11 text

トランジションとそうでない場合の違い

Slide 12

Slide 12 text

Reactのレンダリングをおさらいする トランジションとしてマークされていない場合:  デモのリンク トランジションとしてマークされた場合:  デモのリンク 非常に重たいタブを配置

Slide 13

Slide 13 text

トランジションとしてマークされていない場合 Reactはレンダリングが完了されるまで 同期的に実行するため、 UIがブロッキングされてしまう。

Slide 14

Slide 14 text

トランジションとしてマークされた場合 実行されるタスクが細切れに分割され、 ユーザのイベントを受け付けることができる

Slide 15

Slide 15 text

図解してみる

Slide 16

Slide 16 text

トランジションとしてマークされていない場合

Slide 17

Slide 17 text

トランジションとしてマークされた場合 タスクが細かく分割されている

Slide 18

Slide 18 text

まとめ

Slide 19

Slide 19 text

まとめ 1. startTransition 関数を使用すると、 state の更新をトランジションとしてマーク することができる 2. トランジションとしてマークされた 更新タスクは優先度が低くなる 3. 低い優先度のタスクは 一定の間隔でタスクを中断 し、中断した時点から再度 MacroTaskに登録してタスクを再開する

Slide 20

Slide 20 text

まとめ 1. startTransition 関数を使用すると、 state の更新をトランジションとしてマークすることができる 2. トランジションとしてマークされた更新タスクは優先度が低くなる 3. 低い優先度のタスクは一定の間隔でタスクを中断し、中断した時点から再度 MacroTaskに登録してタスクを再開する その結果重たいstate更新の処理中もユーザのイベントを受け付けることができる

Slide 21

Slide 21 text

ご清聴いただきありがとうございました! 詳しい内容はこちらまで