Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.
Avatar for soso soso
February 16, 2022

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

Avatar for soso

soso

February 16, 2022
Tweet

More Decks by soso

Other Decks in Programming

Transcript

  1. ܭଌͷखॱ 1. ࣮ࡍʹ৮ͬͯॏ͔ͬͨ৔ॴ͔Βେ·͔ͳ͋ͨΓΛ͚ͭΔ 2. Pro fi lerͷϋΠϥΠτػೳͰ࠶ϨϯμϦϯά͕සൟʹൃੜ͍ͯ͠Δ͜ͱΛ֬ೝ 3. Pro fi

    lerͷܭଌΛ։࢝ɺΞϓϦΛಈ͔ͯ͠ঢ়ଶΛߋ৽͢Δ 4. ࠶ϨϯμϦϯά͞ΕΔͱPro fi lerʹϨϯμϦϯά͞Εͨίϯϙʔωϯτͱ࣌ؒ ͕දࣔ͞ΕΔ
  2. ࠶ܭଌ ݁Ռͱͯ͠͸มΘΒͣListҎԼͷίϯϙʔωϯτ͕શ ͯ࠶ϨϯμϦϯά͞Ε͍ͯΔ Pro fi lerͰݪҼΛ֬ೝͯ͠ΈΔͱ onClick ͷ Props ͕

    มԽͨ͜͠ͱʹΑΓϨϯμϦϯά͞Εͨ͜ͱ͕Θ͔ Δ → onClick ʹ౉͍ͯ͠Δؔ਺Λ useCallback ͰϝϞ Խ͢Δ