Reactにおける再レンダリングパフォーマンスチューニングの考え方と実践

Transcript

1. Reactʹ͓͚Δ࠶ϨϯμϦϯά ύϑΥʔϚϯενϡʔχϯάͷߟ͑ํͱ࣮ફ ˏsoso_15315
2. ࣗݾ঺հ • χοΫωʔϜ: soso • גࣜձࣾGemcook ϦʔυϑϩϯτΤϯδχΞ • React/Next.js/React Native/GraphQL • झຯ͸ғޟʢ8ஈ͙Β͍ʣ • Twitter: @soso_15315
3. ໨࣍ • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯενϡʔχϯά͸͍ͭඞཁͳͷ͔ • Chrome Developer Tools Ͱܭଌ • ύϑΥʔϚϯε࠷దԽ࣮ફ • ·ͱΊ
4. ͜ͷεϥΠυͰѻΘͳ͍͜ͱ • memo/useMemo/useCallbackͳͲͷઆ໌ • ࢖ͬͨ͜ͱແ͍Αͱ͍͏ํ͸ʮύϑΥʔϚϯενϡʔχϯά͕Ͱ͖Δ ReactͷAPIʯ͙Β͍ͷೝࣝͰਐΊ͍ͯͩ͘͞ • Context/StateͷҠಈͳͲʹΑΔύϑΥʔϚϯενϡʔχϯά • έʔεόΠέʔεʹͳΓ͕ͪͳͷͰࠓճ͸औΓѻ͍·ͤΜ
5. ໨࣍ • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯενϡʔχϯά͸͍ͭඞཁͳͷ͔ • Chrome Developer Tools Ͱܭଌ • ύϑΥʔϚϯε࠷దԽ࣮ફ • ·ͱΊ
6. ύϑΥʔϚϯενϡʔχϯά͸͍ͭඞཁͳͷ͔ʁ → WebΞϓϦ։ൃʹ͓͍ͯɺ࠶ϨϯμϦϯά࠷దԽʹΑΔύϑΥʔϚ ϯενϡʔχϯά͕ඞཁʹͳΔػձ͸গͳ͍ • Reactࣗମ͕ߴ଎ • εϚϗ/PCͷεϖοΫ͕े෼ߴ͍ • ໨ཱͪ΍͍͢ॳظදࣔ଎౓ͷվળ͕༏ઌ͞Ε͕ͪ
7. ύϑΥʔϚϯενϡʔχϯά͕ඞཁʹͳΓ΍͍͢Օॴ • ແݶεΫϩʔϧ/Ծ૝εΫϩʔϧ • ίϯϙʔωϯτ͕େྔ͔ͭසൟʹߋ৽͞ΕΔ • Ϧετ಺ͷΞΠςϜ͕ॏ͍ίϯϙʔωϯτʹͳΓ͕ͪ • ॏ͍ΞχϝʔγϣϯͳͲඳըʹෛ୲Λֻ͚Δॲཧ͕͋Δ৔߹ • React NativeͰ։ൃ͢Δ৔߹ • Ծ૝εΫϩʔϧ͕ඞཁʹͳΔ͜ͱ͕ଟ͍ • ϦονͳUIΛ௥ٻ͢ΔͱύϑΥʔϚϯε͕Լ͕Δ
8. ໨࣍ • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯενϡʔχϯά͸͍ͭඞཁͳͷ͔ • Chrome Developer Tools Ͱܭଌ • ύϑΥʔϚϯε࠷దԽ࣮ફ • ·ͱΊ
9. https://chrome.google.com/webstore/detail/react-developer-tools/ fmkadmapgofadopljbjfkapdkoienihi?hl=ja
10. ϨϯμϦϯά͞ΕͨίϯϙʔωϯτΛ ϋΠϥΠτͰදࣔ ίϯϙʔωϯτ͕ϨϯμϦϯά͞Εͨ ཧ༝Λදࣔ
11. ܭଌͷखॱ 1. ࣮ࡍʹ৮ͬͯॏ͔ͬͨ৔ॴ͔Βେ·͔ͳ͋ͨΓΛ͚ͭΔ 2. Pro fi lerͷϋΠϥΠτػೳͰ࠶ϨϯμϦϯά͕සൟʹൃੜ͍ͯ͠Δ͜ͱΛ֬ೝ 3. Pro fi lerͷܭଌΛ։࢝ɺΞϓϦΛಈ͔ͯ͠ঢ়ଶΛߋ৽͢Δ 4. ࠶ϨϯμϦϯά͞ΕΔͱPro fi lerʹϨϯμϦϯά͞Εͨίϯϙʔωϯτͱ࣌ؒ ͕දࣔ͞ΕΔ
13. ໨࣍ • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯενϡʔχϯά͸͍ͭඞཁͳͷ͔ • Chrome Developer Tools Ͱܭଌ • ύϑΥʔϚϯε࠷దԽ࣮ફ • ·ͱΊ
14. ࠶ϨϯμϦϯάΛ཈੍͢Δڥք ΛܾΊΔ Listίϯϙʔωϯτͷߋ৽ʹ൐͍ListҎԼͷίϯ ϙʔωϯτ͕શͯߋ৽͞Ε͍ͯΔ → ListItemΛ memo ͰϝϞԽ͢Δ
15. ࠶ܭଌ ݁Ռͱͯ͠͸มΘΒͣListҎԼͷίϯϙʔωϯτ͕શ ͯ࠶ϨϯμϦϯά͞Ε͍ͯΔ Pro fi lerͰݪҼΛ֬ೝͯ͠ΈΔͱ onClick ͷ Props ͕ มԽͨ͜͠ͱʹΑΓϨϯμϦϯά͞Εͨ͜ͱ͕Θ͔ Δ → onClick ʹ౉͍ͯ͠Δؔ਺Λ useCallback ͰϝϞ Խ͢Δ
16. ࠶౓ܭଌ ΄΅શͯͷίϯϙʔωϯτͷ࠶ϨϯμϦϯάΛ཈੍ Ͱ͖ΔΑ͏ʹͳͬͨ Reader Duration΋ 23.2ms → 3.6ms ʹ ʢ࣮ࡍͷܭଌͰ͸ฏۉ஋Λऔͬͨ΄͏͕ྑ͍ʣ
17. ໨࣍ • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯεରࡦ͸͍ͭඞཁͳͷ͔ • Chrome Developer Tools Ͱܭଌ • ύϑΥʔϚϯε࠷దԽ࣮ફ • ·ͱΊ
18. ·ͱΊ • Pro fi ler Λۦ࢖͢Δͱ࠶ϨϯμϦϯάͷ֬ೝɾ཈੍͕͠΍͍͢ • ࠶ϨϯμϦϯάͷύϑΥʔϚϯενϡʔχϯά͕ඞཁʹͳΔػձ͕͋ Ε͹ɺࠓճͷܭଌ → ରࡦͷखॱΛࢼͯ͠Έ͍ͯͩ͘͞
19. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠