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
PHPカンファレンス関西2025　基調講演
Avatar for SUGIMOTO Kei sugimotokei
6
1k
NEWT Backend Evolution
Avatar for Rodrigo Ramirez xpromx
1
160
iOS開発スターターキットの作り方
Avatar for akidon0000 akidon0000
0
210
フロントエンドのパフォーマンスチューニング
Avatar for kouki.miura koukimiura
6
2.3k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
Avatar for azukiazusa azukiazusa1
2
730
The Niche of CDK Grant オブジェクトって何者？/the-niche-of-cdk-what-isgrant-object
Avatar for hassaku63 hassaku63
1
720
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
Avatar for Takuto Wada twada
PRO
35
10k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
Avatar for のんちゃん non0113
2
240
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
Avatar for yoshiyoshifujii yoshiyoshifujii
4
650
React は次の10年を生き残れるか：3つのトレンドから考える
Avatar for Yuka O’oka oukayuka
40
15k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
Avatar for Ucchiii ucchiii43
0
230
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
Avatar for ktr ktr_0731
3
700

Featured

See All Featured
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.4k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
21
1.4k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
It's Worth the Effort
Avatar for 3n 3n
185
28k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
19k

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