$30 off During Our Annual Pro Sale. View Details »

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

soso
February 16, 2022

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

soso

February 16, 2022
Tweet

More Decks by soso

Other Decks in Programming

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