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
25

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
JavaScript AST入門 〜自作Babelプラグインを添えて〜
Avatar for yuuki-katsuta sakiika
1
11

Other Decks in Programming

See All in Programming
AIに安心して任せるためにTypeScriptで一意な型を作ろう
Avatar for Yuki Yata arfes0e2b3c
0
280
AIコーディングエージェント全社導入とセキュリティ対策
Avatar for hikae hikaruegashira
15
8.6k
知って得する@cloudflare_vite-pluginのあれこれ
Avatar for chimame chimame
1
120
コーディングエージェント概観(2025/07)
Avatar for Itsuki itsuki_t88
0
450
NEWT Backend Evolution
Avatar for Rodrigo Ramirez xpromx
1
170
React は次の10年を生き残れるか：3つのトレンドから考える
Avatar for Yuka O’oka oukayuka
40
15k
Strands Agents で実現する名刺解析アーキテクチャ
Avatar for omiya omiya0555
1
110
ご注文の差分はこちらですか？ 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
Avatar for Kenji Kono konokenj
4
720
変化を楽しむエンジニアリング ~ いままでとこれから ~
Avatar for murajun1978 murajun1978
0
580
GPUを計算資源として使おう！
Avatar for prime number primenumber
1
300
Quality Gates in the Age of Agentic Coding
Avatar for Hélio Medeiros helmedeiros
PRO
1
110
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
Avatar for Akira Suenami a_suenami
8
1k

Featured

See All Featured
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
400
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Done Done
Avatar for chrislema chrislema
185
16k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ