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