How each keyed block works

[karchung0930]

Hello, thanks for the amazing works.

I try to understand how the keyed each block works under the hood by reading the doc

My understanding so far when there is no key given and causing the bug in the example of the doc:

When we remove the first’s item in the array, Svelte removes the last DOM node, then updates the remaining nodes.

Here is what I’m confused about, why only the text got updated but not the icon/src?

Apparently if Svelte did some comparisons for the src, it is the not the same.

As we removed the last item, I understand that the index remains the same and thus Svelte might thought nothing changes, but in this case, doesn’t the text also be the same make more sense?

I try to understand how it works instead of just following the doc where adding the key will definitely solved the problem.

[phi-bre]

This is edge case is caused by component "instance" being reused when the array is mutated.

So the icon, which is assigned to a const in the script tag (you can think of the script tag as construtor() {} like in a class, which only runs once when created with new) will not change, as the component itself (the instance that was created on the initial render) will be reused, just individual reactive values will be surgically updated to match expected output.

On the other hand, the "text" (in the docs example "name") is defined as a $props(), which is reactive and will therefore be updated properly. Adding the $derived() to the icon will fix it, as you are telling svelte, that this is indeed a reactive property as well, and should update based on changes to "name".

What the {#each}-key does is tell svelte: "only bother reusing the component instance if they exactly match the unique key", so svelte will search for existing row instances and reuse them if it finds matching keys instead of shifting the entire array and doing nested updates. (or construct an entirely new instance if no existing key matches)

[karchung0930]

@phi-bre Hi, thanks for responding.

When using a keyed {#each} in Svelte, how does it determine which item was removed when the array changes (e.g. removing the first element)?

My assumption is that Svelte matches items by their keys, possibly by building something like a key → component lookup to reuse existing instances.
If that’s the case:

• What algorithm or strategy does Svelte use internally to match old and new lists?
• Is this process efficient for large lists with frequent updates?
• Does it run in O(n), or is there additional overhead for lookups and DOM operations?

I’m trying to understand both how Svelte identifies removed items and whether this approach scales well performance-wise.

[phi-bre]

You can take a look at the algorithm here

With a keyed {#each}, the framework treats the key as the item's identity in a Map

1. Build a mapping from key -> existing rendered item
2. Walk the new array in order
3. For each new item:
   • If its key already exists, reuse that rendered item
   • If not, create a new one
4. After that pass, any old keyed item that was not matched is considered removed
5. If reused items appear in a different order, move their DOM blocks to match the new order

So if you remove the first element, Svelte does not think "remove index 0". It thinks "the item with key A no longer exists in the new list, but B and C still do", so it destroys only the item with key A and keeps the others.

The algorithm is a chain of linear loops, therefore complexity should be near O(n). So yes, the alrogithm is efficient for large lists, but if you frequently reorder thousands of actual DOM nodes, DOM work will dominate no matter how good the matching algorithm is.