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

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

Avatar for Sakiika Sakiika
May 09, 2025
Programming
0
5

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

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

Sakiika

May 09, 2025
Tweet

Other Decks in Programming

See All in Programming
Ruby on Railroad: The Power of Visualizing CFG
Avatar for ydah ydah
0
300
エンジニア向けCursor勉強会 @ SmartHR
Avatar for Yuki Horikoshi yukisnow1823
3
12k
オープンソースコントリビュート入門
Avatar for katsuma _katsuma
0
120
実践Webフロントパフォーマンスチューニング
Avatar for しーぴー cp20
45
10k
Jakarta EE Meets AI
Avatar for ivargrimstad ivargrimstad
0
820
ニーリーQAのこれまでとこれから
Avatar for Nealle nealle
2
170
KawaiiLT 登壇資料　キャリアとモチベーション
Avatar for 柊 hiiragi
0
160
Designing Your Organization's Test Pyramid ( #scrumniigata )
Avatar for teyamagu teyamagu
PRO
4
520
On-the-fly Suggestions of Rewriting Method Deprecations
Avatar for Masato Ohba ohbarye
3
4.9k
Flutterでllama.cppをつかってローカルLLMを試してみた
Avatar for sakuraidayo sakuraidayo
0
130
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
Avatar for r-kagaya rkaga
4
1.2k
Instrumentsを使用した アプリのパフォーマンス向上方法
Avatar for hinakko hinakko
0
240

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
133
9.3k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
13
830
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
29
930
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
35
2.7k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
10k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
137
6.9k
Scaling GitHub
Avatar for Zach Holman holman
459
140k

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