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.

How is it helpful? Or how can I avoid this case.

UPDATE 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".

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.

Also, do consider the cost of "repainting", rendering loops.

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.

How is it helpful? Or how can I avoid this case.

UPDATE 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".

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.

Also, do consider the cost of "repainting", rendering loops.

• javascript
• reactjs

• Isn't the "virtual DOM" supposed to catch this (so that the real DOM does not get re-rendered except for changes)? – Thilo Commented Feb 10, 2016 at 7:14
• @Thilo Yes, but even with VDOM, why would you update the whole tree when you can just a node? It costs for "re-painting" – scazzy Commented Feb 10, 2016 at 7:30

1 Answer 1

If you give each item in the list a unique (and deterministic) key=uniqueValue prop, then React will preserve list items where the key has not changed, thus avoiding a re-render of the entire list.

render() {
  var comments = comments.map(function(comment){
    return (
      <Comment
        key={comment.id} // This should be a unique, deterministic value
        ...
      />
    );
  });

  return(
    <div>
      {comments}
    </div>
  ); 
}

Read more in React's Dynamic Children doc section.