Reactjs: Prevent re-rendering of relocated nodes -
i have gallery of 160 items being rendered. user able sort , group items in gallery. sorting instantaneous none of items re-rendered. however, when group items react thinks every item needs re-rendered (it doesn't shouldcomponentupdate called) taking few seconds.
here basic structure looks like:
<div key="gallery"> <div key="item1" ... /> <div key="item2" ... /> <div key="item3" ... /> </div>
then after grouping becomes:
<div key="gallery"> <div key="group1" .../> <div key="group1-gallery"> <div key="item1" ... /> <div key="item2" ... /> </div> <div key="group2" .../> <div key="group2-gallery"> <div key="item3" ... /> </div> </div>
the items not changed @ all. there anyway convince react re-use existing items? there different structure should using or other way provide hint react?
Comments
Post a Comment