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

ReactとUXの話 〜 startTransition を添えて 〜

Avatar for yuuki-katsuta yuuki-katsuta
May 09, 2025
Programming
0
29

ReactとUXの話 〜 startTransition を添えて 〜

Netadashi Meetup #12 の登壇資料です。

Avatar for yuuki-katsuta

yuuki-katsuta

May 09, 2025
Tweet

More Decks by yuuki-katsuta

See All by yuuki-katsuta
Viteプラグインで学ぶビルドツールの裏側
Avatar for yuuki-katsuta sakiika
0
10
JavaScript AST入門 〜自作Babelプラグインを添えて〜
Avatar for yuuki-katsuta sakiika
1
15

Other Decks in Programming

See All in Programming
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
Avatar for Daichi KUDO da1chi
3
2k
大規模アプリのDIフレームワーク刷新戦略 ～過去最大規模の並行開発を止めずにアプリ全体に導入するまで～
Avatar for GO Inc. dev mot_techtalk
0
430
CSC305 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
スマホから Youtube Shortsを見られないようにする
Avatar for lemolatoon lemolatoon
25
28k
iOSエンジニア向けの英語学習アプリを作る！
Avatar for yukawashouhei yukawashouhei
0
190
オープンソースソフトウェアへの解像度🔬
Avatar for うたもく utam0k
12
2.5k
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
Avatar for Koya Masuda koxya
1
1.2k
Six and a half ridiculous things to do with Quarkus
Avatar for Holly Cummins hollycummins
0
160
技術的負債の正体を知って向き合う / Facing Technical Debt
Avatar for irof irof
0
150
バッチ処理を「状態の記録」から「事実の記録」へ
Avatar for HideyukiKitao panda728
PRO
0
140
チームの境界をブチ抜いていけ
Avatar for tokai235 tokai235
0
160
iOSエンジニア向けの英語学習アプリを作る！
Avatar for yukawashouhei yukawashouhei
0
190

Featured

See All Featured
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
53k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.3k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
139
7.1k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
620

Transcript

  1. 3FBDUͱ69ͷ࿩ ʙTUBSU5SBOTJUJPOΛఴ͑ͯʙ উా༤ᏻc /FUBEBTIJ.FFUVQ

  2. ɾ5BHCBOHFST *OD ɾओʹϑϩϯτΤϯυͷ։ൃʢ໿೥͘Β͍ʣ ɾొஃ͸ॳΊͯ উా༤ᏻ!ZVVLJLBUTVUB ࣗݾ঺հ

  3. ͸͡Ίʹ  ςʔϚ ɾ3FBDUͷฒྻϨϯμϦϯά͕΋ͨΒ͢69ͷਐԽ ɾ6*ߋ৽ͷ෣୆ཪΛ೷͍ͯΈΑ͏

  4.  69ʢϢʔβʔମݧʣΛୈҰʹ IUUQTMFHBDZSFBDUKTPSHCMPHCVJMEJOHHSFBUVTFSFYQFSJFODFTXJUIDPODVSSFOUNPEFBOETVTQFOTFIUNMQVUUJOHVTFS FYQFSJFODF fi STU %FWFMPQFS&YQFSJFODFˠ6TFS&YQFSJFODF

  5. 4ZODISPOPVT3FOEFSJOH  Event Event Event User Interaction Main thread ʢ#MPDLFEʣ

    ʢ#MPDLFEʣ

  6. $PODVSSFOU3FOEFSJOH  User Interaction Event Event ʢ/PO#MPDLJOHʣʢ/PO#MPDLJOHʣ

  7. $PODVSSFOU3FOEFSJOH  ɾ3FBDUͷ৽͍͠ϨϯμϦϯάػߏ ɾϨϯμϦϯάϓϩηεΛதஅՄೳͳ࡞ۀ୯Ґʹ෼ׂ ɹɹˠதஅɾ࠶ձɾഁغ͕Մೳʹ ɹɹˠϨϯμϦϯάϓϩηεʹ༏ઌ౓ͷ֓೦ ˞ϨϯμϦϯάˠԾ૝%0.πϦʔͷߏங

  8. ෮शʙTUBSU5SBOTJUJPOͱ͸ʙ  TUBSU5SBOTJUJPOؔ਺Λ࢖༻ͯ͠ঢ়ଶͷߋ৽Λ ʮ௿༏ઌ౓ͷεςʔτߋ৽ʯͱͯ͠3FBDUʹ఻͑Δ ͜ͷߋ৽͸ۓٸͰ͸ͳ͍ͨΊɺॲཧ͢΂͖ۓٸͷλεΫ͕͋Δ৔߹͸தஅͰ͖Δ

  9. TUBSU5SBOTJUJPOͷྫ  ೖྗϑΥʔϜ user input Rendering ༏ઌ౓ߴ ༏ઌ౓௿ Ϣʔβͷೖྗ஋ʹର͢ΔมԽˠ༏ઌ౓ߴ ϢʔβͷೖྗʹΑΔϦετͷϨϯμʔˠ༏ઌ౓௿

  10. ΋͏Ұͭͷੈք  ʮCSBODIϞσϧʯ΍ʮผͷੈքʯͱ͍͏දݱ ˠVTF5SBOTJUJPO͕ͲͷΑ͏ʹػೳ͢Δ͔Λཧղ͢ΔͨΊͷൺᄻදݱ ެࣜυΩϡϝϯτΑΓ IUUQTSFBDUKTPSHEPDTDPODVSSFOUNPEFQBUUFSOTIUNM

  11. CSBODIϞσϧͰߟ͑ͯΈΔ  ௿༏ઌ౓ͷ3FOEFS ˠߴ༏ઌ౓ͷϨϯμϦϯά͕ऴྃͨ͠ޙʹͷΈ࣮ߦ։࢝ ˠߴ༏ઌ౓ͷλεΫͷߋ৽ʹΑͬͯதஅ͞ΕΔ Main thread transition thread ʢ௿༏ઌ౓ͷRenderʣ

    1 2 3 4 5 %0.൓ө %0.൓ө %0.൓ө ʢϑΥʔϜೖྗ

  12. CSBODIϞσϧͰߟ͑ͯΈΔ  ߴ༏ઌ౓ͷλεΫͷߋ৽ʹΑͬͯதஅ͞ΕΔ ˠߴ༏ઌ౓ͷλεΫᶅ͕ൃੜ ˠ௿༏ઌ౓ͷλεΫᶄͷϨϯμϦϯά͕தஅ Main thread transition thread ʢ௿༏ઌ౓ͷRenderʣ

    1 2 3 4 5 %0.൓ө %0.൓ө %0.൓ө ʢϑΥʔϜೖྗ

  13. ·ͱΊ  ɾ3FBDU͓΋͠Ζ͍ʂ ɹ͜ͷ࢓૊ΈΛ׆༻ͯ͠ɺϓϩμΫτΛΑΓྑ͍΋ͷʹ͍ͨ͠Ͷ ɾৄࡉͳ࢓૊ΈΛ΋ͬͱ஌Γͨ͘ͳͬͨ ɹ'JCFS3FDPODJMFS3FDPODJMJBUJPOʜ

  14. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ