Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

Avatar for yuuki-katsuta yuuki-katsuta
May 09, 2025
Programming
1
45

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

Other Decks in Programming

See All in Programming
AIエンジニアリングのご紹介 / Introduction to AI Engineering
Avatar for r-kagaya rkaga
8
3.4k
2年のAppleウォレットパス開発の振り返り
Avatar for muno92 muno92
PRO
0
120
Navigation 3: 적응형 UI를 위한 앱 탐색
Avatar for Sungyong An fornewid
1
470
TestingOsaka6_Ozono
Avatar for O3(ozono) o3
0
180
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
400
AtCoder Conference 2025「LLM時代のAHC」
Avatar for Yuki Imajuku imjk
2
590
AIコーディングエージェント（Manus）
Avatar for kondai kondai24
0
220
Cell-Based Architecture
Avatar for Luram Archanjo larchanjo
0
140
AIコーディングエージェント（Gemini）
Avatar for kondai kondai24
0
280
GISエンジニアから見たLINKSデータ
Avatar for nokonoko1203 nokonoko1203
0
180
大規模Cloud Native環境におけるFalcoの運用
Avatar for Chihiro Hasegawa owlinux1000
0
200
生成AIを利用するだけでなく、投資できる組織へ
Avatar for pospome pospome
2
410

Featured

See All Featured
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
130
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
66
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
220k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
0
960
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
0
310
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
13
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
57
40k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
39
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
58

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