10

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.

enter image description here

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.

scazzy
  • 950
  • 2
  • 8
  • 20
  • Isn't the "virtual DOM" supposed to catch this (so that the real DOM does *not* get re-rendered except for changes)? – Thilo Feb 10 '16 at 07: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 Feb 10 '16 at 07:30

1 Answers1

21

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.

Matthew Herbst
  • 29,477
  • 23
  • 85
  • 128
  • Key is provided. But consider it's a facebook like news feed. You keep lazy loading, the feed only increases until the end of era. If for every new feed item, you re-render the WHOLE FEED, how expansive is DOM rendering + painting. – scazzy Feb 10 '16 at 07:34
  • The whole point of the `key` prop is that it means you don't re-render the whole feed, just the new element (plus removal of any elements that no longer exist). Sure you have to do the for-loop every time your `CommentList` renders, but that's beyond trivial. – Matthew Herbst Feb 10 '16 at 07:44
  • exactly my point. If it's a dense list of 5000 rows (like fb), and every second I'm supposed to receive atleast 10 new records. If the rendering (which is nothing but - create new VDOM > render 5000+increasing everytime. – scazzy Feb 10 '16 at 10:16
  • @eltonjain you have terms very mixed up. Every item in the list is not re-rendered. In the example I have above, every item in the list will be looped-over and given a key. **Only items with new keys will have to be rendered. Existing items - those where the key has not changed - will not be re-rendered**. The simple for-loop above, even on 50,000 elements, is trivially fast. – Matthew Herbst Feb 10 '16 at 16:57
  • ohkay. Will re-test and update you on the results. Thanks – scazzy Feb 12 '16 at 07:22
  • This answer is incorrect, at least for the latest version of React. `key` does not prevent a re-render. See https://stackoverflow.com/questions/45364424/react-re-render-array-whereas-item-key-has-not-changed – Code Apr 17 '23 at 02:27