Concerning React performance when manging a big list

(Kun Zhou) #1

React Performance

Imagine I am maintaining a list of say 20000 items in my app built with React, where each item in the list contain a title, some meta info about the item, and an last updated date and time. Further suppose that I need to update the title of item No. 1924. So in order for React to update that item and render the new View, it needs to call render() in the component MyBigList, which will need to loop through all those 20000 items again, creating an element MyItem for each of these items and stuff them into a list. Then, after comparing nextProps and props 20000 times, React realizes that only the 1924th MyItem actually needs updating. So it calls the render() of the 1924thMyItem.

My question is it seems to be extremely non-performant because we are creating more than 20000 react elements from scratch, and only to realize all but one of them is necessary.

Now, if I do not use React, I can simply update the title of 1924th element in the <div> that houses my list, which sounds much more performant.

Is what I am thinking correct? So what is the catch?