Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactにおける再レンダリングパフォーマンスチューニングの考え方と実践
Search
soso
February 16, 2022
Programming
2
340
Reactにおける再レンダリングパフォーマンスチューニングの考え方と実践
soso
February 16, 2022
Tweet
Share
More Decks by soso
See All by soso
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
370
AWS CDKを4〜5年使ってたどり着いた最新構成
soso_15315
1
1.4k
Next.jsで作ったブログ内に リンクカードを実装したときの知見
soso_15315
3
730
React Hooks公開から1年で得られた知見
soso_15315
1
480
Other Decks in Programming
See All in Programming
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
return文におけるstd::moveについて
onihusube
1
780
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
今年一番支援させていただいたのは認証系サービスでした
satoshi256kbyte
1
250
14 Years of iOS: Lessons and Key Points
seyfoyun
1
770
Recoilを剥がしている話
kirik
5
6.6k
Criando Commits Incríveis no Git
marcelgsantos
2
170
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
0
160
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
930
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
270
【re:Growth 2024】 Aurora DSQL をちゃんと話します!
maroon1st
0
770
CSC305 Lecture 26
javiergs
PRO
0
140
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
65
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
The Pragmatic Product Professional
lauravandoore
32
6.3k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Transcript
Reactʹ͓͚Δ࠶ϨϯμϦϯά ύϑΥʔϚϯενϡʔχϯάͷߟ͑ํͱ࣮ફ ˏsoso_15315
ࣗݾհ • χοΫωʔϜ: soso • גࣜձࣾGemcook ϦʔυϑϩϯτΤϯδχΞ • React/Next.js/React Native/GraphQL
• झຯғޟʢ8ஈ͙Β͍ʣ • Twitter: @soso_15315
࣍ • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯενϡʔχϯά͍ͭඞཁͳͷ͔ • Chrome Developer Tools Ͱܭଌ • ύϑΥʔϚϯε࠷దԽ࣮ફ
• ·ͱΊ
͜ͷεϥΠυͰѻΘͳ͍͜ͱ • memo/useMemo/useCallbackͳͲͷઆ໌ • ͬͨ͜ͱແ͍Αͱ͍͏ํʮύϑΥʔϚϯενϡʔχϯά͕Ͱ͖Δ ReactͷAPIʯ͙Β͍ͷೝࣝͰਐΊ͍ͯͩ͘͞ • Context/StateͷҠಈͳͲʹΑΔύϑΥʔϚϯενϡʔχϯά • έʔεόΠέʔεʹͳΓ͕ͪͳͷͰࠓճऔΓѻ͍·ͤΜ
࣍ • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯενϡʔχϯά͍ͭඞཁͳͷ͔ • Chrome Developer Tools Ͱܭଌ • ύϑΥʔϚϯε࠷దԽ࣮ફ
• ·ͱΊ
ύϑΥʔϚϯενϡʔχϯά͍ͭඞཁͳͷ͔ʁ → WebΞϓϦ։ൃʹ͓͍ͯɺ࠶ϨϯμϦϯά࠷దԽʹΑΔύϑΥʔϚ ϯενϡʔχϯά͕ඞཁʹͳΔػձগͳ͍ • Reactࣗମ͕ߴ • εϚϗ/PCͷεϖοΫ͕ेߴ͍ • ཱ͍ͪ͢ॳظදࣔͷվળ͕༏ઌ͞Ε͕ͪ
ύϑΥʔϚϯενϡʔχϯά͕ඞཁʹͳΓ͍͢Օॴ • ແݶεΫϩʔϧ/ԾεΫϩʔϧ • ίϯϙʔωϯτ͕େྔ͔ͭසൟʹߋ৽͞ΕΔ • ϦετͷΞΠςϜ͕ॏ͍ίϯϙʔωϯτʹͳΓ͕ͪ • ॏ͍ΞχϝʔγϣϯͳͲඳըʹෛ୲Λֻ͚Δॲཧ͕͋Δ߹ •
React NativeͰ։ൃ͢Δ߹ • ԾεΫϩʔϧ͕ඞཁʹͳΔ͜ͱ͕ଟ͍ • ϦονͳUIΛٻ͢ΔͱύϑΥʔϚϯε͕Լ͕Δ
࣍ • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯενϡʔχϯά͍ͭඞཁͳͷ͔ • Chrome Developer Tools Ͱܭଌ • ύϑΥʔϚϯε࠷దԽ࣮ફ
• ·ͱΊ
https://chrome.google.com/webstore/detail/react-developer-tools/ fmkadmapgofadopljbjfkapdkoienihi?hl=ja
ϨϯμϦϯά͞ΕͨίϯϙʔωϯτΛ ϋΠϥΠτͰදࣔ ίϯϙʔωϯτ͕ϨϯμϦϯά͞Εͨ ཧ༝Λදࣔ
ܭଌͷखॱ 1. ࣮ࡍʹ৮ͬͯॏ͔ͬͨॴ͔Βେ·͔ͳ͋ͨΓΛ͚ͭΔ 2. Pro fi lerͷϋΠϥΠτػೳͰ࠶ϨϯμϦϯά͕සൟʹൃੜ͍ͯ͠Δ͜ͱΛ֬ೝ 3. Pro fi
lerͷܭଌΛ։࢝ɺΞϓϦΛಈ͔ͯ͠ঢ়ଶΛߋ৽͢Δ 4. ࠶ϨϯμϦϯά͞ΕΔͱPro fi lerʹϨϯμϦϯά͞Εͨίϯϙʔωϯτͱ࣌ؒ ͕දࣔ͞ΕΔ
None
࣍ • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯενϡʔχϯά͍ͭඞཁͳͷ͔ • Chrome Developer Tools Ͱܭଌ • ύϑΥʔϚϯε࠷దԽ࣮ફ
• ·ͱΊ
࠶ϨϯμϦϯάΛ੍͢Δڥք ΛܾΊΔ Listίϯϙʔωϯτͷߋ৽ʹ͍ListҎԼͷίϯ ϙʔωϯτ͕શͯߋ৽͞Ε͍ͯΔ → ListItemΛ memo ͰϝϞԽ͢Δ
࠶ܭଌ ݁Ռͱͯ͠มΘΒͣListҎԼͷίϯϙʔωϯτ͕શ ͯ࠶ϨϯμϦϯά͞Ε͍ͯΔ Pro fi lerͰݪҼΛ֬ೝͯ͠ΈΔͱ onClick ͷ Props ͕
มԽͨ͜͠ͱʹΑΓϨϯμϦϯά͞Εͨ͜ͱ͕Θ͔ Δ → onClick ʹ͍ͯ͠ΔؔΛ useCallback ͰϝϞ Խ͢Δ
࠶ܭଌ ΄΅શͯͷίϯϙʔωϯτͷ࠶ϨϯμϦϯάΛ੍ Ͱ͖ΔΑ͏ʹͳͬͨ Reader Duration 23.2ms → 3.6ms ʹ ʢ࣮ࡍͷܭଌͰฏۉΛऔͬͨ΄͏͕ྑ͍ʣ
࣍ • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯεରࡦ͍ͭඞཁͳͷ͔ • Chrome Developer Tools Ͱܭଌ • ύϑΥʔϚϯε࠷దԽ࣮ફ
• ·ͱΊ
·ͱΊ • Pro fi ler Λۦ͢Δͱ࠶ϨϯμϦϯάͷ֬ೝɾ੍͕͍͢͠ • ࠶ϨϯμϦϯάͷύϑΥʔϚϯενϡʔχϯά͕ඞཁʹͳΔػձ͕͋ Εɺࠓճͷܭଌ →
ରࡦͷखॱΛࢼͯ͠Έ͍ͯͩ͘͞
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠