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

Transcript

1. Reactʹ͓͚Δ࠶ϨϯμϦϯά
   
   
   ύϑΥʔϚϯενϡʔχϯάͷߟ͑ํͱ࣮ફ
   ˏsoso_15315
   

   View Slide

2. ࣗݾ঺հ
   • χοΫωʔϜ: soso
   
   
   • גࣜձࣾGemcook ϦʔυϑϩϯτΤϯδχΞ
   
   
   • React/Next.js/React Native/GraphQL
   
   
   • झຯ͸ғޟʢ8ஈ͙Β͍ʣ
   
   
   • Twitter: @soso_15315
   

   View Slide

3. ໨࣍
   • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯενϡʔχϯά͸͍ͭඞཁͳͷ͔
   
   
   • Chrome Developer Tools Ͱܭଌ
   
   
   • ύϑΥʔϚϯε࠷దԽ࣮ફ
   
   
   • ·ͱΊ
   

   View Slide

4. ͜ͷεϥΠυͰѻΘͳ͍͜ͱ
   • memo/useMemo/useCallbackͳͲͷઆ໌
   
   
   • ࢖ͬͨ͜ͱແ͍Αͱ͍͏ํ͸ʮύϑΥʔϚϯενϡʔχϯά͕Ͱ͖Δ
   ReactͷAPIʯ͙Β͍ͷೝࣝͰਐΊ͍ͯͩ͘͞
   
   
   • Context/StateͷҠಈͳͲʹΑΔύϑΥʔϚϯενϡʔχϯά
   
   
   • έʔεόΠέʔεʹͳΓ͕ͪͳͷͰࠓճ͸औΓѻ͍·ͤΜ
   

   View Slide

5. ໨࣍
   • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯενϡʔχϯά͸͍ͭඞཁͳͷ͔
   
   
   • Chrome Developer Tools Ͱܭଌ
   
   
   • ύϑΥʔϚϯε࠷దԽ࣮ફ
   
   
   • ·ͱΊ
   

   View Slide

6. ύϑΥʔϚϯενϡʔχϯά͸͍ͭඞཁͳͷ͔ʁ
   → WebΞϓϦ։ൃʹ͓͍ͯɺ࠶ϨϯμϦϯά࠷దԽʹΑΔύϑΥʔϚ
   ϯενϡʔχϯά͕ඞཁʹͳΔػձ͸গͳ͍
   
   
   • Reactࣗମ͕ߴ଎
   
   
   • εϚϗ/PCͷεϖοΫ͕े෼ߴ͍
   
   
   • ໨ཱͪ΍͍͢ॳظදࣔ଎౓ͷվળ͕༏ઌ͞Ε͕ͪ
   

   View Slide

7. ύϑΥʔϚϯενϡʔχϯά͕ඞཁʹͳΓ΍͍͢Օॴ
   • ແݶεΫϩʔϧ/Ծ૝εΫϩʔϧ
   
   
   • ίϯϙʔωϯτ͕େྔ͔ͭසൟʹߋ৽͞ΕΔ
   
   
   • Ϧετ಺ͷΞΠςϜ͕ॏ͍ίϯϙʔωϯτʹͳΓ͕ͪ
   
   
   • ॏ͍ΞχϝʔγϣϯͳͲඳըʹෛ୲Λֻ͚Δॲཧ͕͋Δ৔߹
   
   
   • React NativeͰ։ൃ͢Δ৔߹
   
   
   • Ծ૝εΫϩʔϧ͕ඞཁʹͳΔ͜ͱ͕ଟ͍
   
   
   • ϦονͳUIΛ௥ٻ͢ΔͱύϑΥʔϚϯε͕Լ͕Δ
   

   View Slide

8. ໨࣍
   • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯενϡʔχϯά͸͍ͭඞཁͳͷ͔
   
   
   • Chrome Developer Tools Ͱܭଌ
   
   
   • ύϑΥʔϚϯε࠷దԽ࣮ફ
   
   
   • ·ͱΊ
   

   View Slide

9. https://chrome.google.com/webstore/detail/react-developer-tools/
   fmkadmapgofadopljbjfkapdkoienihi?hl=ja
   

   View Slide

10. ϨϯμϦϯά͞ΕͨίϯϙʔωϯτΛ
    
    
    ϋΠϥΠτͰදࣔ
    ίϯϙʔωϯτ͕ϨϯμϦϯά͞Εͨ
    
    
    ཧ༝Λදࣔ
    

    View Slide

11. ܭଌͷखॱ
    1. ࣮ࡍʹ৮ͬͯॏ͔ͬͨ৔ॴ͔Βେ·͔ͳ͋ͨΓΛ͚ͭΔ
    
    
    2. Pro
    fi
    lerͷϋΠϥΠτػೳͰ࠶ϨϯμϦϯά͕සൟʹൃੜ͍ͯ͠Δ͜ͱΛ֬ೝ
    
    
    3. Pro
    fi
    lerͷܭଌΛ։࢝ɺΞϓϦΛಈ͔ͯ͠ঢ়ଶΛߋ৽͢Δ
    
    
    4. ࠶ϨϯμϦϯά͞ΕΔͱPro
    fi
    lerʹϨϯμϦϯά͞Εͨίϯϙʔωϯτͱ࣌ؒ
    ͕දࣔ͞ΕΔ
    

    View Slide

12. View Slide

13. ໨࣍
    • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯενϡʔχϯά͸͍ͭඞཁͳͷ͔
    
    
    • Chrome Developer Tools Ͱܭଌ
    
    
    • ύϑΥʔϚϯε࠷దԽ࣮ફ
    
    
    • ·ͱΊ
    

    View Slide

14. ࠶ϨϯμϦϯάΛ཈੍͢Δڥք
    ΛܾΊΔ
    Listίϯϙʔωϯτͷߋ৽ʹ൐͍ListҎԼͷίϯ
    ϙʔωϯτ͕શͯߋ৽͞Ε͍ͯΔ
    
    
    → ListItemΛ memo ͰϝϞԽ͢Δ
    

    View Slide

15. ࠶ܭଌ
    ݁Ռͱͯ͠͸มΘΒͣListҎԼͷίϯϙʔωϯτ͕શ
    ͯ࠶ϨϯμϦϯά͞Ε͍ͯΔ
    
    
    Pro
    fi
    lerͰݪҼΛ֬ೝͯ͠ΈΔͱ onClick ͷ Props ͕
    มԽͨ͜͠ͱʹΑΓϨϯμϦϯά͞Εͨ͜ͱ͕Θ͔
    Δ
    
    
    → onClick ʹ౉͍ͯ͠Δؔ਺Λ useCallback ͰϝϞ
    Խ͢Δ
    

    View Slide

16. ࠶౓ܭଌ
    ΄΅શͯͷίϯϙʔωϯτͷ࠶ϨϯμϦϯάΛ཈੍
    Ͱ͖ΔΑ͏ʹͳͬͨ
    
    
    Reader Duration΋ 23.2ms → 3.6ms ʹ
    
    
    ʢ࣮ࡍͷܭଌͰ͸ฏۉ஋Λऔͬͨ΄͏͕ྑ͍ʣ
    

    View Slide

17. ໨࣍
    • ࠶ϨϯμϦϯά࣌ͷύϑΥʔϚϯεରࡦ͸͍ͭඞཁͳͷ͔
    
    
    • Chrome Developer Tools Ͱܭଌ
    
    
    • ύϑΥʔϚϯε࠷దԽ࣮ફ
    
    
    • ·ͱΊ
    

    View Slide

18. ·ͱΊ
    • Pro
    fi
    ler Λۦ࢖͢Δͱ࠶ϨϯμϦϯάͷ֬ೝɾ཈੍͕͠΍͍͢
    
    
    • ࠶ϨϯμϦϯάͷύϑΥʔϚϯενϡʔχϯά͕ඞཁʹͳΔػձ͕͋
    Ε͹ɺࠓճͷܭଌ → ରࡦͷखॱΛࢼͯ͠Έ͍ͯͩ͘͞
    

    View Slide

19. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide