Reactive React: the pursuit of high performing, easily maintainable React apps(mendix.com)
mendix.com
Reactive React: the pursuit of high performing, easily maintainable React apps
https://www.mendix.com/tech-blog/making-react-reactive-pursuit-high-performing-easily-maintainable-react-apps/#
3 comments
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 :)
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.
How do keys help react understand which items explicitly need to render when an indirect dependency changes? The article looks like it exposes an inevitability which is that diffing the vdom is fast but not without its limits. I'd love to hear your idea in more detail though if you think this is easily solvable out of the box without a solution such as that described.