うわっ…リスト表示重すぎ… Reactのパフォーマンス改善の処方箋/react-list-performance-improvement

͏ΘͬʜϦετදࣔॏ͗͢ʜ 3FBDUͷύϑΥʔϚϯεվળͷॲํᝦ

2,ݱঢ়෼ੳͱ໰୊఺ ࣗݾ঺հ ɾ!QFOUMB ౉ลҰً ɾ'"45"-&35νʔϜ ɾϑϩϯτ݉όοΫΤϯυΤϯδχΞ ɾ"QFY3VTUಡॻ

2,ݱঢ়෼ੳͱ໰୊఺ 5XFFU%FDL࡞ͬͯʂ ͬͯݴΘΕͨΒɺͲ͏͠·͢ʁ ૣ଎

2,ݱঢ়෼ੳͱ໰୊఺ ͋Δఔ౓׬੒ͨ͠ͱͯ͠ ɾͱΓ͋͑ͣ3FBDUͰ ɾ"1*ͱͷܨ͗ࠐΈ΋ͳΜͱ͔׬ྃʂ ɾσʔλ͕දࣔͰ͖ΔΑ͏ʹͳΓ·ͨ͠

2,ݱঢ়෼ੳͱ໰୊఺ ͨͩ͠ɻɻɻ͜ͷΑ͏ͳཁ͕݅དྷͯ͠·͍·ͨ͠ ɾ৽͍͠λΠϜϥΠϯ͕࣍ʑͱདྷΔ͔Βදࣔͯ͠Ͷʂ ɾԼʹεΫϩʔϧ͢ΔͱաڈͷλΠϜϥΠϯΛḪΕΔΑ͏ʹͶ ɾը૾ɾಈըΛද͍ࣔͨ͠Ͷ

2,ݱঢ়෼ੳͱ໰୊఺ ॏ͘ͳΔɻ ʷ

2,ݱঢ়෼ੳͱ໰୊఺ ࠓճ͸ʮ3FBDUʯͷʮϦετදࣔʯͷ࿩Λ͠·͢

2,ݱঢ়෼ੳͱ໰୊఺ Ͳ͏͢Δ΂͖͔ɿ3FBDUͷυΩϡϝϯτ ʰΞϓϦέʔγϣϯ͕௕͍σʔλͷϦετʢ਺ඦʙ਺ઍߦʣΛϨϯμʔ͢Δ৔߹͸ɺ ʮ΢Οϯυ΢Πϯάʯͱͯ͠஌ΒΕΔςΫχοΫΛ࢖͏͜ͱΛ͓͢͢Ί͠·͢ɻ͜ͷςΫχο ΫͰ͸ɺ͋Δॠؒ͝ͱʹ͸Ϧετͷখ͞ͳ෦෼ू߹ͷΈΛඳը͢Δ͜ͱͰɺੜ੒͢Δ%0. ϊʔυͷ਺͓Αͼίϯϙʔωϯτͷ࠶ඳըʹ͔͔Δ࣌ؒΛେ෯ʹ࡟ݮ͢Δ͜ͱ͕Ͱ͖·͢ɻʱ ʰSFBDUXJOEPXͱSFBDUWJSUVBMJ[FE͸ਓؾ͕͋Δ΢Οϯυ΢ΠϯάॲཧͷϥΠϒϥϦͰ ͢ɻ͜ΕΒ͸ϦετɺάϦουɺ͓ΑͼදܗࣜͷσʔλΛදࣔ͢ΔͨΊͷɺ͍͔ͭ͘ͷ࠶ར༻ ՄೳίϯϙʔωϯτΛఏڙ͍ͯ͠·͢ɻΞϓϦέʔγϣϯͷಛఆͷϢʔεέʔεʹ߹Θͤͨ௥ ՃతͳॲཧΛ͢Δ৔߹͸ɺ5XJUUFS͕ߦͳ͍ͬͯΔΑ͏ʹɺಠࣗͷ΢Οϯυ΢Πϯάॲཧͷίϯ
ϙʔωϯτΛ࡞੒͢Δ͜ͱ΋Ͱ͖·͢ɻʱ

2,ݱঢ়෼ੳͱ໰୊఺ ΢Οϯυ΢Πϯά XJOEPXJOH ͱ͸ ʰ͜ͷςΫχοΫͰ͸ɺ͋Δॠؒ͝ͱʹ͸Ϧετͷখ͞ͳ ෦෼ू߹ͷΈΛඳը͢Δ͜ͱͰɺੜ੒͢Δ%0.ϊʔυͷ਺ ͓Αͼίϯϙʔωϯτͷ࠶ඳըʹ͔͔Δ࣌ؒΛେ෯ʹ ࡟ݮ͢Δ͜ͱ͕Ͱ͖·͢ɻʱ ݪҼ͸Ϣʔβʔ͕Έ͍ͯͳ͍ൣғ·Ͱ ඳըͯ͠͠·͍ͬͯΔ͜ͱ

2,ݱঢ়෼ੳͱ໰୊఺ ਤʹ͢Δͱ͜͏ ɾϦετͷେ෦෼͸Կ΋ඳը͠ͳ͍ ɾσΟεϓϨΠʹө͍ͬͯΔ෦෼ͷΈ ඳը͢Δ ɾεΫϩʔϧʹ߹ΘͤͯඳըൣғΛ ௐઅ͢Δ

2,ݱঢ়෼ੳͱ໰୊఺ ͰɺͲ͏΍࣮ͬͯ૷͢Δ͔ ɾશମͷߴ͞ΞΠςϜͭͷαΠζʷݸ਺ ɾඳը࢝͠ΊΔߴ͞ݱࡏͷεΫϩʔϧҐஔ ͔ΒσΟεϓϨΠͷߴ͞·Ͱ

2,ݱঢ়෼ੳͱ໰୊఺ SFBDUXJOEPXΛ࢖͑͹ղܾʁ ϝϞ ɾSFBDUXJOEPX͸SFBDUWJSUVBMJ[FEͱಉ͡ਓ͕ॻ͍ͨϥΠϒϥϦ ɾαΠζΛݮΒ͠ɺύϑΥʔϚϯεΛ޲্ͤͨ͞ޙܧʹ౰ͨΓ·͢ ɾSFBDUXJOEPXL# SFBDUWJSUVBMJ[FE.#

2,ݱঢ়෼ੳͱ໰୊఺ ࠓճ͸؆ૉͳྫͰ࣮૷ΛݟͯΈ·͢

2,ݱঢ়෼ੳͱ໰୊఺ 6*ΛݟͯΈΔͱ ؆ૉ

2,ݱঢ়෼ੳͱ໰୊఺ ͜Ε͕

2,ݱঢ়෼ੳͱ໰୊఺ ͜͏ͳΓ·ͨ͠ ɾXJEUI IFJHIU Ϧετશମͷ௕͞ɺߴ͞ ɾJUFN$PVOU ΞΠςϜશମͷݸ਺ ɾJUFN4J[F ΞΠςϜͭͭͷߴ͞

2,ݱঢ়෼ੳͱ໰୊఺ ॻ͖ํ͕݁ߏҧ͏ ɾ3PXͬͯԿ NBQܗࣜͰهड़Ͱ͖ͳ͍ ɾIFJHIUɺ਺஋Ͱࢦఆ͠ͳ͍ͱμϝʁ ɾΞΠςϜͷߴ͞ʁ ݁ߏΫη͕͋ΔΑͶɺͱ͍͏ͷ͕ ࠓճͷຊ୊Ͱ͢

2,ݱঢ়෼ੳͱ໰୊఺ 6*্͸͜͏ͳΓ·͢ ͍͍ͱ͜Ζ ɾສ݅දࣔͯ͠΋ಈ࡞͕͍ܰʂ ࠷ॳͷNBQΛ࢖͏ͱສ݅͋ͨΓ͕ݶք ඍົͳͱ͜Ζ ɾԼ͕༨ͬͯΔ ߴ͕͞ʹͰ͖͍ͯͳ͍
ɾݸʑͷΞΠςϜͷߴ͞Λݻఆ͢Δඞཁ͕͋Δ

ٙ໰ᶃ 23PXͬͯԿ NBQܗࣜͰ هड़Ͱ͖ͳ͍ͷʁ "*UFNΛҰݸͣͭϨϯμϦϯά͢ΔͷͰ͸ͳ ͘ɺඞཁͳݸ਺͚ͩϨϯμϦϯά͢Δɻ શ෦ϨϯμϦϯά͠ͳ͍ͷͰɺ3PX͸ྻͭ ͋ͨΓͷ಺༰Ͱ͋Δඞཁ͕͋Δɻ

2,ݱঢ়෼ੳͱ໰୊఺ ͰɺͲ͏΍࣮ͬͯ૷͢Δ͔ ͓͞Β͍ ɾશମͷߴ͞ΞΠςϜͭͷαΠζʷݸ਺ ɾඳը࢝͠ΊΔߴ͞ݱࡏͷεΫϩʔϧҐஔ ͔ΒσΟεϓϨΠͷߴ͞·Ͱ

2,ݱঢ়෼ੳͱ໰୊఺ ٙ໰ᶄ 2IFJHIUɺ਺஋Ͱࢦఆ͠ͳ͍ͱ μϝʁ "SFBDUWJSUVBMJ[FEBVUPTJ[FSΛ࢖͑͹ େৎ෉

2,ݱঢ়෼ੳͱ໰୊఺ ٙ໰ᶄ 2IFJHIUɺ਺஋Ͱࢦఆ͠ͳ͍ͱ μϝʁ "SFBDUWJSUVBMJ[FEBVUPTJ[FSΛ࢖͑͹ େৎ෉ ࣮૷ޙ͸ͪ͜Β

2,ݱঢ়෼ੳͱ໰୊఺ 2ΞΠςϜͷߴ͞ʁ "શମͷߴ͞Λਪఆͯ͠ɺݱࡏͷεΫϩʔϧ ҐஔΛ೺Ѳ͢ΔͨΊʹඞਢɻ ͨͩ͠ɺΞΠςϜ͕ՄมαΠζͷ࣌ʹ͸ɻɻɻ ٙ໰ᶅ

2,ݱঢ়෼ੳͱ໰୊఺ 2ΞΠςϜͷߴ͞ʁ "શମͷߴ͞Λਪఆͯ͠ɺݱࡏͷεΫϩʔϧ ҐஔΛ೺Ѳ͢ΔͨΊʹඞਢɻ ͨͩ͠ɺΞΠςϜ͕ՄมαΠζͷ࣌ʹ͸ɻɻɻ 7BSJBCMF4J[F-JTUΛར༻Ͱ͖Δ΋ͷͷɺ ͋Β͔͡Ίߴ͕͞Θ͔͍ͬͯͳ͍ͱ࡞Εͳ͍ ٙ໰ᶅ

2,ݱঢ়෼ੳͱ໰୊఺ ಉ͜͡ͱΛ͍͚ͨͩ͠ ͳͷʹʜɻ

2,ݱঢ়෼ੳͱ໰୊఺ ݁ߏ͠ΜͲ͍

2,ݱঢ়෼ੳͱ໰୊఺ ݁࿦ແཧͯ͠࢖͏͜ͱ͸ͳ͍ ɾϓϩδΣΫτͷ࠷ॳ͸ͦΕͦ͜NBQͷ࣮૷Ͱे෼ ɾগ͠ॏ͍ఔ౓Ͱ͋Ε͹ɺը૾ͷ-B[ZMPBEJOHɾඳը਺Λ ݮΒ͢ͳͲͰରԠ ɾͦΕͰ΋ඳը͕໰୊ʹͳͬͯ͠·ͬͨ৔߹ͷΞϓϩʔν

2,ݱঢ়෼ੳͱ໰୊఺ ผղSFBDUWJSUVPTP ಉ͜͡ͱ͕Ͱ͖ͯɺ ݁ߏγϯϓϧ 4UBSL 4J[F.#

2,ݱঢ়෼ੳͱ໰୊఺ ผΞϓϩʔνฤDPOUFOUWJTJCJMJUZ $44ͰͰ͖ΔͷͰൺֱత͓खܰɻ ର৅ϒϥ΢β͕$ISPNJVNܥ $ISPNF 0QFSB &EHF ʹߜͬͯ Α͚Ε͹͋Γ

2,ݱঢ়෼ੳͱ໰୊఺ ࠷ޙʹ ʰ࢒೦ͳ͕Βɺ؆୯ͳमਖ਼͸͚ͭͩͰ͸͋Γ·ͤΜɻύϑΥʔϚϯε͸ɺ վળ͢ΔྖҬΛ؂ࢹ͓Αͼଌఆ͢ΔܧଓతͳήʔϜͰ͢ɻʱ ࠓճͷ࿩Λखࡳͷͭͱͯ͠࢖͍͚ͬͯͨͩͨΒ ͱࢥ͍·͢ʂ

ࢀߟจݙ ʮύϑΥʔϚϯε࠷దԽʯIUUQTKBSFBDUKTPSHEPDTPQUJNJ[JOHQFSGPSNBODFIUNMWJSUVBMJ[FMPOHMJTUT ʮ5XJUUFS-JUFBOE)JHI1FSGPSNBODF3FBDU1SPHSFTTJWF8FC"QQTBU4DBMFʯ IUUQTNFEJVNDPN!QBVMBSNTUSPOHUXJUUFSMJUFBOEIJHIQFSGPSNBODFSFBDUQSPHSFTTJWF XFCBQQTBUTDBMFEBFB ʮSFBDUXJOEPXʯIUUQTHJUIVCDPNCWBVHIOSFBDUXJOEPXIPXJTSFBDUXJOEPX EJ ff FSFOUGSPNSFBDUWJSUVBMJ[FE͔Βҙ༁ ʮSFBDUWJSUVBMJ[FEOQNʯIUUQTXXXOQNKTDPNQBDLBHFSFBDUWJSUVBMJ[FE
ʮSFBDUXJOEPXOQNʯIUUQTXXXOQNKTDPNQBDLBHFSFBDUXJOEPX ʮ࠲ΔೣͷΠϥετʯIUUQTXXXJSBTVUPZBDPNCMPHQPTU@IUNM ʮDPOUFOUWJTJCJMJUZʯIUUQTXFCEFWDPOUFOUWJTJCJMJUZ

Thank you!

うわっ…リスト表示重すぎ… Reactのパフォーマンス改善の処方箋/react-list-p...