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
380
Reactにおける再レンダリングパフォーマンスチューニングの考え方と実践
soso
February 16, 2022
Tweet
Share
More Decks by soso
See All by soso
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
540
AWS CDKを4〜5年使ってたどり着いた最新構成
soso_15315
1
2.1k
Next.jsで作ったブログ内に リンクカードを実装したときの知見
soso_15315
3
860
React Hooks公開から1年で得られた知見
soso_15315
1
500
Other Decks in Programming
See All in Programming
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
技術同人誌をMCP Serverにしてみた
74th
1
360
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
270
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
110
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
270
GraphRAGの仕組みまるわかり
tosuri13
8
480
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
160
GoのGenericsによるslice操作との付き合い方
syumai
3
690
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
GraphQLとの向き合い方2022年版
quramy
48
14k
A better future with KSS
kneath
239
17k
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 Λۦ͢Δͱ࠶ϨϯμϦϯάͷ֬ೝɾ੍͕͍͢͠ • ࠶ϨϯμϦϯάͷύϑΥʔϚϯενϡʔχϯά͕ඞཁʹͳΔػձ͕͋ Εɺࠓճͷܭଌ →
ରࡦͷखॱΛࢼͯ͠Έ͍ͯͩ͘͞
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠