[deaddodo]

No matter which framework you describe, this is an iterative approach and will be inefficient. The optimized (or, at least faster) way to handle this would be to have a unique ID attached to a cell and offer a direct callback to it via the data.

E.g. the symbol for "GOOG" stored in a hash table, when GOOG updates; call that hash directly: "symbols[symbol].update(data)" then re-render the cell DOM element.

[ricardobeat]

Svelte keeps a direct reference to DOM elements and mutates them when possible, if you do it right you can probably achieve vanilla-levels of performance.

[nickthemagicman]

Studying cracking the code interview at the moment and neat seeing this as is an actual use case for some of the array/hashmap interview questions.

[tylerhou]

If you update all the data why is this more efficient?

[allannienhuis]

contents _can_ change, not _will_ change. So this approach should update fewer cells per update cycle.

[tylerhou]

For a realtime view of stock symbols, it's highly likely they will change. And a hashmap lookup is not free.

You really have to profile the code to figure out what's expensive. Maybe there is no scaling wrt. the number of nodes that change because repainting/relayouting is more expensive than updating the DOM.

[username90]

> And a hashmap lookup is not free.

They are basically free when you have this little data. 1k cells updates 10 times a second means that you have around 100 micro seconds per cell, you can do thousands of lookups in that time. The only things which could even come close to costing 100 micro seconds are if you accidentally re-flow the html each cell update, re-render the html each cell update, send a http request each cell update or if you go through all the data each cell or the framework you are using is extremely inefficient or other unnecessary work. Each of those are easily fixable by doing the html and javascript by hand instead of using frameworks.