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
props 20000 times, React realizes that only the 1924th
MyItem actually needs updating. So it calls the
render() of the 1924th
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?