Svelte 5: each + array updated via `unshift` breaks UI

[kaisermann]

Describe the bug

If a stateful array is populated with items via unshift(), an each block consuming that array starts to behave awkwardly after the second insertion.

The REPL has a working version (with push) and a broken version (with unshift)

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE7VTTY-bMBD9K1O3h0QbEm2PBCKt2steql6qHpY9EDyE0Rob2UNohPjvlTH5YD9OVYWM7Jk3z_PGM70oSaET8VMvdF6jiMVD04iV4FPjD-6IilGshDOtLbwlcYWlhneZzlghA0lI4f58UuT4N3H1S7uKSoYUvjjOGRdPz8vta9DP1lVvERn7f9nqgsloIF1YrFHzYgl98G820Bn74qAjrmDdtK4Kjlvi0bzogeQKvLLYZzosLwx7i_mFog3pzlkmDWfnR1zhT_Luzu-GTCeba4l0sm-ZjQajC0XFS9ovlpDublUNYykfpASNHRBj7SlCWKCQdIRC5c6lmehs3jRoMzFGedcuJDAK8ZrjZG93fgX7LNriEa3DKdp__WfMi2r-JLkb0xjOmNk9N4ZHxhoev8fQe_ia5JBsvB3eR_4YKxewvooT-uaW2bnf-MymJK6um90r8dM7vaP_I7XnLv1nwcmnKAKuyPeTUnAw0FmjD5CXjBZIxvAVyIGrTKchiubMPvabqX03BA42Y3-_Af6nSl4sOnF8Ujg611OjhZkDkOQalZ9iOFiS05z6bcRYNypnjAqj2lq7GO5L69d2GoeRbWq88wRf2EqFfyY2v40kWRznPobAF02R2-twjTmKlaiNpJJQiphti8Pz8Bd7AiHQzQQAAA==

Logs

No response

System Info

Just the repl

Severity

annoyance

[brunnerh]

Isn't that just a keying issue?
{#each} is generally only safe to use without key if items are added to/removed from the end.
I.e. only push and pop work.

Keyed REPL

[kaisermann]

Isn't that just a keying issue?

Ah, makes sense. Will close this then

[Prinzhorn]

{#each} is generally only safe to use without key if items are added to/removed from the end.

Wow, TIL. I've been using Svelte for years and always assumed adding a key would not change the result at all. In my mind adding a key is always optional and can only make things better and help Svelte make smarter decisions about which item belongs to which DOM node and as such improves performance (e.g. not updating every single innerText when an item is inserted in the middle) and issues with things like <input> elements losing focus because it's not actually the same node you've focused before.

The docs say exactly what you said, but is this actually how it works in Svelte 4? I rely on non-keyed #each in some scenarios and have never run into any issues. I'm somewhat in disbelief right now that in Svelte data and UI can actually run out of sync like this? Are you sure this isn't a regression in v5?

V4 https://svelte.dev/repl/91b73f3e897b43e6a570bdd14ef6acee?version=4.2.8

[Prinzhorn]

Yes, this is definitely a regression. Without a key Svelte always uses appendChild but that doesn't mean it won't update all other nodes properly. With a key it can insert the node it the right place. But the resulting HTML is 100% identical.

The docs:

rather than adding or removing items at the end

refers to the DOM node and not the array item.

In my REPL you can see that nicely in dev tools. Nodes are appended. If you add a key, they are added at the top of the list. But without the key Svelte will still touch every single other node to update the contents.

[brunnerh]

The UI can easily get out of sync in all versions but usually only if components are involved because they introduce a new scope that is not reactive to the outside by default (the top level script). There even is an example of that in the tutorial and it happens so often that I opened an issue related to it.

But yes, this is a regression as everything here is plain markup which should be fully reactive.
So if there is no key, it merely would incur more update work.
(I was not entirely sure at first which is why I phrased it as a question, but thinking about it more, that should indeed just work as is.)

Issue should be reopened.

[trueadm]

I’ll look into this on Monday. :)

[trueadm]

Seems like #10111 fixed this too. :)