

Reactive React: the pursuit of high performing, easily maintainable React apps - mweststrate
https://www.mendix.com/tech-blog/making-react-reactive-pursuit-high-performing-easily-maintainable-react-apps/#

======
akamaozu
You could use keys for each article to prevent react from rendering the whole
list on update; it'd identify exactly which need updating, inserting or
removal and do the minimal work to get there :)

~~~
mweststrate
Hi, the keys are used indeed in the example to prevent re-rendering. However,
it does not prevent diffing the virtual dom. In other words, the new list with
components needs to be compared with the old list. That comparison is fast
because the keys will match, but before that can be done, the map function
that re-creates all the 20.000 components need to be executed still, which
takes roughly 200ms which can be saved easily.

