title: How to avoid re-rendering the whole List instead of adding the new item to the DOM list in react JS?
body: <p>As in the React demo, and other examples, I see people resetting the State data if one record is added or removed. Which results in the whole list being re-rendered instead of simply appending the latest record, or removing the selected one from the current DOM tree.</p>
  
  <p>How is it helpful? Or how can I avoid this case.</p>
  
  <p><a href="https://i.stack.imgur.com/0y7m0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0y7m0.png" alt="enter image description here"></a></p>
  
  <p><strong>UPDATE</strong>
  The situation: Facebook feed, you keep scrolling the feed, reach around 5000 feed statuses and many other types of cards. Not just that, each status feed has it's own "comment list".</p>
  
  <p>Every second, 5-10 status cards are pre-pended to your wall, or appended in case of lazy loading. ie. every second, you re-render n+n*0.5, where say n can go above 5000 cards.</p>
  
  <p>Also, do consider the cost of "repainting", rendering loops.</p>