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

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -