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
350
Reactにおける再レンダリングパフォーマンスチューニングの考え方と実践
soso
February 16, 2022
Tweet
Share
More Decks by soso
See All by soso
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
460
AWS CDKを4〜5年使ってたどり着いた最新構成
soso_15315
1
1.7k
Next.jsで作ったブログ内に リンクカードを実装したときの知見
soso_15315
3
780
React Hooks公開から1年で得られた知見
soso_15315
1
480
Other Decks in Programming
See All in Programming
color-scheme: light dark; を完全に理解する
uhyo
7
500
Learning Kotlin with detekt
inouehi
1
150
Unity Android XR入門
sakutama_11
0
180
読まないコードリーディング術
hisaju
0
110
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
160
はじめての Go * WASM *OCR
sgash708
1
110
コードを読んで理解するko build
bells17
1
110
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
730
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
9
2.5k
Jakarta EE meets AI
ivargrimstad
0
500
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
It's Worth the Effort
3n
184
28k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Being A Developer After 40
akosma
89
590k
Building Adaptive Systems
keathley
40
2.4k
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 Λۦ͢Δͱ࠶ϨϯμϦϯάͷ֬ೝɾ੍͕͍͢͠ • ࠶ϨϯμϦϯάͷύϑΥʔϚϯενϡʔχϯά͕ඞཁʹͳΔػձ͕͋ Εɺࠓճͷܭଌ →
ରࡦͷखॱΛࢼͯ͠Έ͍ͯͩ͘͞
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠