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
310
Reactにおける再レンダリングパフォーマンスチューニングの考え方と実践
soso
February 16, 2022
Tweet
Share
More Decks by soso
See All by soso
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
220
AWS CDKを4〜5年使ってたどり着いた最新構成
soso_15315
1
980
Next.jsで作ったブログ内に リンクカードを実装したときの知見
soso_15315
3
630
React Hooks公開から1年で得られた知見
soso_15315
1
470
Other Decks in Programming
See All in Programming
What you can do with Ruby on WebAssembly
kateinoigakukun
0
160
REXML改善のその後
naitoh
0
190
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
170
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
370
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
140
null or undefined
susisu
22
6.2k
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
240
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
670
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
260
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
320
dotfiles について話したい #湘なんか
stefafafan
2
300
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
250
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
359
18k
Being A Developer After 40
akosma
84
590k
A designer walks into a library…
pauljervisheath
201
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Docker and Python
trallard
39
3k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
How to Ace a Technical Interview
jacobian
275
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Infographics Made Easy
chrislema
239
18k
How STYLIGHT went responsive
nonsquared
93
5.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 Λۦ͢Δͱ࠶ϨϯμϦϯάͷ֬ೝɾ੍͕͍͢͠ • ࠶ϨϯμϦϯάͷύϑΥʔϚϯενϡʔχϯά͕ඞཁʹͳΔػձ͕͋ Εɺࠓճͷܭଌ →
ରࡦͷखॱΛࢼͯ͠Έ͍ͯͩ͘͞
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠