push on reactive variable triggers as many updates as there are elements in the appended array

[shadow-identity]

Describe the bug

Unexpectedly push triggers as many updates as there are elements in the appended array.

const src = $state([0])
const push =  () => arr.push(...[1,2,3])
$inspect(src)
// update Array [ 0, 1 ]
// update Array(3) [ 0, 1, 2 ]
// update Array(4) [ 0, 1, 2, 3 ]

I think it is definitely a bug.

Reproduction

https://svelte.dev/playground/c121ee5b3bda44c3b146792a7d01d26f?version=5.35.5
Results can be seen in the console

System Info

Chrome, Firefox

Severity

annoyance

[Prinzhorn]

The concat() method of Array instances is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

https://svelte.dev/playground/c121ee5b3bda44c3b146792a7d01d26f?version=5.35.5#H4sIAAAAAAAAA31QyWrDMBD9FSFykMEoXW6uLehH9GT7oMgTKqoqwjPugvG_d4QT4tLQy2j0lpknzTLad5CVfInkKcAgS3n0AVBW7SzpO2UuA4yflc8pafyAQBk7WIRbuDtFgkg8RtboRp_IdLHjBSRwdKIROyRLoNq7vsgE65EEV2eJWaEK0ZizlKteGdXelw_l49aSJnz9ZdAZUVrrv9oBkMbJ5QXb-S2LuSvF1dRn085HTOBIMVk8dbHeX18S68NEdIqCcwXv3pp5TbiY9az3K29uKHPAxeT6n-oSdjGXbqPmHyb4IlkxAUvPN-vDp4-DrI42ICw_pMOwntgBAAA=

[Prinzhorn]

I think the more interesting bug here is that .push(1,2,3) is not atomic but triggers three logs? I don't think it's the intent of the call to trigger intermediate updates.

[brunnerh]

I don't think it matters.

Effects are scheduled and executed later, only $inspect (which is a debugging tool) will "see" the intermediate states.

Playground example

[dummdidumm]

Correct, $inspect runs synchronously to not miss any updates so only with this you'll observe this behavior. And x.push(1,2,3) is just sugar for x.push(1); x.push(2); x.push(3) and there's no way to change/intercept/know this for us. Therefore closing.

[Prinzhorn]

there's no way to change/intercept/know this for us.

I see, I didn't know that since a Proxy will see that as one call with multiple arguments. I thought Svelte would internally re-implement push and do it "wrong" by delegating multiple arguments to multiple internal non-atomic push calls.

[shadow-identity]

If $inspect sees these updates, it still means that the array is re-created many times. It is not performant and memory consuming even if an effect is called just once afterwards.

Also, it could be related to the issue, or could be not, but is it expected that attachment re-runs only if I update the list using list = [...list, list.length + 1], but does not re-run if I update it with list.push(list.length + 1);?
https://svelte.dev/playground/12998c051ef944dfa0a4d1da0a94e558?version=5.35.5

[Prinzhorn]

It's the same instance, hence the console.log is not triggered I assume. If you actually use the array data it works, e.g.

length: https://svelte.dev/playground/12998c051ef944dfa0a4d1da0a94e558?version=5.35.5#H4sIAAAAAAAAA5VVy27rNhD9FUK9gCTUVpIW3fiFBmgWBVq0wF0mWdDiSCZCkwJJxTYM_XuHD8lS6ji4iyTUzDnzOORMzomke0gWyd-n70pbuhWQzJKKCzDJ4vmc2FPjvM6A9oh9bJrCvIOwzralBq7ZSyUtSIthkpUpNW8sEVTW65fEmpdk8yJfrAC0cWPJmnwzllrInh9mv7zmS-d0P1UrS8uVJE1rdllOzt5hHafwJn8SIGu7Iz-Th8DsJlQGxuq2tFM6pnwuisIdZ-RDlNc-CP75xqVpANkOE8JjY8in1tJyt8cOMVRGtc7JetNn0GBbLUkmFQNnDyQloBCqztLABZbOCBJj5jxmXd0FtZxCcrVtrcUmlCwFL9_WZ9d1t_kXfxNuYb-6C4DNFWjfeLd5ZMyjyYFjh7291VzW4wCtIOffQ22j9kLnnb-w80_gnF5AanzMLnS8Enxz9t-rOzx68J0D-45aEbox9iTAO12uwGwoY1jIgtwvL9cz98gFkUpCNB84s7sFebi_b47R1BrQcwMC72cE9RUJ3sffU11z6YjNcchR4eOcH4DXO2RulWDRvqXlW61VK9m8VELpBWFUv2no_dF42GGr0WThaOdU8BpzlKgX6KEPCfNdzPHbpeqt0gzr1pTx1oS6lpe79wrh-LiwyQIvCrrZJ2P4Xfl5LXDGJmM4sY_G0I1bueOCaZCY0X0yTesnAXtXgBxGRklnx4nUNoM4Nj0SXztGRk3BLsf2wldeqIaW3J4QdV_8ioDuSmD1DnqIC0Wj4R0r_AMq2goc09GQhTwfU_KKZL1nPbSQkzB1F7bz_MmQzSWD4z9VNkD_l2ICC6Z8yBXjrAZsHk8FrfC6P4QFYaD3b6FSGiaAa4KAZF_p8anMabr8cD2yFeJqItXczjJl9GqA19az4lp71JqeikqrfdY_p7yYwPtgcGzwnwpuHJ-EhFUy7MkrOzEN3fb7M-S-7NU-nXsRTozRa3buq4XhDTxh5AxGcZwABuyjtZrj_oMsdfrVbmpwJ6du6mIlEetFL1ttlCbrtNZ0m47cuMGenJh_YXsg8UWkw_xguNE05V-S8CkMFDx_TXDDNDDcx1cU1US4avKA7Dxl8o8rn4j1A7q6rBr2WMiPKnKT-aksN1k3tLnBGws04Lv-2MVV3S2nS_oVvygXB5yDZFFRXALdfyl_tVZcCQAA

items: https://svelte.dev/playground/12998c051ef944dfa0a4d1da0a94e558?version=5.35.5#H4sIAAAAAAAAA5VVy27bMBD8FUItIAm1laRFL36hAZpDgRYt0GOSAy2uZDY0KZBUbMPQv3dJSrKUOg56SELtzuxjyN0cI0m3EM2iH4ffSlu6FhBNooILMNHs_hjZQ-W8zoD2FntbVZl5BmGdbU0NnLPnSlqQFsNEC5NrXlkiqCyXD5E1D9HqQT5YAWjjxpIleW8stZDc30w-PqZz53Q_RS1zy5UkVW02SUqO3mEdJ_MmfxIgS7shH8hNYDYjKgNjdZ3bMR1T3mdZ5o4T8iLKYxcE_7zn0lSAbIcJ4bEx5FNrab7ZYocYKqFap2S56jJosLWWJJGKgbMHkhKQCVUmceACiycEidkfxWWSpm3WxVVQyykkF-vaWmxCyVzw_Gl5dF03q1_4m3AL28VVAKzOQLvGm9UtYx5Ndhw77Oy15rIcBqgFOX4JtQ3aC503_sKO78A5vYDU-JhN6Hgh-OrovxdXePTgKwf2HdUidGPsQYB3ulyBWVHGsJAZuZ6frmfqkTMilYTWvOPMbmbk5vq62rem2oCeGhB4PwOor0jwLv6W6pJLR6z2fY4CH-d0B7zcIHOtBGvta5o_lVrVkk1zJZSeEUb1k4bO3xp3G2y1NVnY2ykVvMQcOeoFuu9DwnTT5vh8qnqtNMO6NWW8NqGu-enuvUI4Pi5sNMOLgmbyyhj-Vn5eM5yx0RiO7IMxdOOWb7hgGiRmdJ9M0_JOwNYVIPuRUdLZcSK1TaAdmw6Jrx0jo6Zg50N75ivPVEVzbg-Ius4-IaA5E1g9g-7jQlZpeMYKv0JBa4FjOhiykOdlSl6QpPMs-xZSEqbuxHaebwzZXDLY_yySHvpPihEsmNI-Vxtn0WPT9pTRAq_7RVgQBjr_GgqlYQQ4JwhI9pYer8ocx_MX1yNrIc4mUtXlLGNGpwZ4bT2rXWu3WtNDVmi1TbrnlGYjeBcM9hX-U8GN45OQsEr6PXlmJ8ah225_htynvdqlcy_CiTF4zc59tjC8gTuMnMAgjhPAgL21VnPcf5DETr_STQ3u5NhNXVtJi_Wi57U2SpNlXGq6jgdu3GB3Tszv2B5IfBFxPz8YbjBN6ZskfAo9Bc9vE9ww9Qz38RZFVS1cVWlANp4y-seVjsT6D11dVg1bLOR_FbnIfFWWi6wL2lzgDQXq8U13bNpV3czHS_oRvygXO5yDaFZQXALNX2zJdFdcCQAA

[shadow-identity]

At the same time, arr[0] does not trigger re-run.
https://svelte.dev/playground/12998c051ef944dfa0a4d1da0a94e558?version=5.35.5

This feels quite far from consistency.

[Prinzhorn]

Why would it? arr[0] has not changed, it's the same primitive value. You don't want your attachment code to re-run for no reason. If you actually use that value, e.g. node.setAttribute('foo', arr[0]) or similar you would call DOM APIs for no reason.

[shadow-identity]

arr[0] does not re-run
arr.at(0) does re-run
tho this is understandable, it is still inconsistent. and why just console.log(arr) does not re-run?..

[paoloricciuti]

arr[0] does not re-run arr.at(0) does re-run tho this is understandable, it is still inconsistent. and why just console.log(arr) does not re-run?..

This is just how fine grained reactivity works...if you listen for arr only when arr changes (not one of it's items) you'll see the log.

The reason why .at(0) reruns is because internally it's acessing .length so when you push, length changes and .at(0) reruns

[shadow-identity]

Thanks guys, now I understood how and why it works.

[Prinzhorn]

Well, looks like it has been changed after all #16389

5.36.2

5.36.3