Deep fine-grained reactivity : pushing element to an array triggers deep-down sibling reactivity

[plgingras88]

Greeting svelte folk ! I am a bit lost at none-primitive reactivity (array) and its scope.

In the repl below, I have a global $state([]) to which I add a new entry (project) each time I click the button. But anytime I click the add, which pushes an new entry to the list, each component will trigger an update output the console ( there is a $inspect({ name: project.name }) into that component).

Since I modified the array with a push, but not its previous entries by reference, I was not expecting all these update $inspect to the console. If you click 3 times, the last output will trigger 3 inspect : one init and 2 updates. Does this mean this could trigger re-render or impact performance ?

That being said, I am wondering if there's a place where such behaviors are clearly explained and what are the best patterns (simplicity and performance wise) to embrace the framework. The only doc/examples I could found were quite trivial and wouldn't dig much deeper so as I developer I can understand the magic happening behind runes, but also their caveats and limitations.

Thanks !

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo1SwYrbMBD9lUHNwabGpldvEljYSy7LQg89xKGrWpNYWVsS0njbIPTvRbacpGwpvUmaNzPvPT3PjrJHx-q9Z4oPyGr2aAwrGF1MvLh37AlZwZwebRtf1q610tC2UQ3JwWhL4OEraYsQ4Gj1AA0rq-mhnLvLs2vYwx3-xeoztnRDp4eEn8Dr6rZHrX-MRFqBVm0v27eNz3LYbOetJRci9Wd52D4KAWa-rqu5bRrhPyFvu9SSAA64W8CQpUO5e8pDJLteaKbCxqdDgGrbKF_FgYEVbNBCHiUKVpMdMRRXJ-9NuFl6dvd2tj13Dr7PBvq490puAytHnDDbH_Jon2roXuuMbqjVyukey16fMuqkm7DUUDxflZZmdF3mYfdUw5-FHtWJus9fCoisa3hdZK_834HhtQDDT-hq2B8g5HFbaFT0TOGv6YMjJUqh2IDCn0lglj_8y6-0-X_TN0uP8Vv-METPjNXGZYtjUFXwrbtMouEN0TjQI5mRpDrBUVuYYrEM4OpCckDYARcC-ER9qZEG6hB66SJOgNDo5rFyMDzmBO1R24GrFkHPy1dSORN_68rxeTJ5yVoUDiH_kHch3yeJ_h4YIipWPnp4CL8BdybeSMkDAAA=

[Prinzhorn]

App.svelte is not in runes mode, so #each does not do its optimization.

I added <svelte:options runes />

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA32TTY-bMBCG_8qI5gBqBOqVhUgr7SWX1Uo99BCirguT4CzYlm22jSz_99rGJFRb7c2eeZmPxy8mOdEBVVIeTMLIiEmZPAqRbBN9Ff6i3nHQ6O6KT7L1kWoOlVxoypkCOTFUUOwa1rBKtZIK7c-ajoJLDQa-ay4RLJwkH6FJ8iIE8rlMflFN8rDSv0h-wVbf1TEQ9UFcFfc-rPo1ac0ZcNYOtH2rTZpBvZu75qTr4vdpZnePXQdivlbF_FkoYb4gafv4SRQoIGoRQxoP-f4ps37YahkzJmoTDzaQMIUvaB22kXf0RLFLSi0ntNsb5TWEO-6LWqNuB6IU_JwBGt_3NlwNG6WJxvRwzDw-l1vvOqsb3boX4gPmAz-nuqcqaF3cn2-b5mJSfWpg_1TCv4kB2Vn3X79twU9dwuuy9sb8X2hftyDIGVUJhyPYzHdzwDwzhn_CA_uRdDRFDQx_xwXT7OEzXrHz5868u29e3dtveUPrmbmLUOlCDIoCfvTXsDS8IQoFfNJi0pSd4cQlBFssBQi7OpMi7MGRBhJGX3KauyIIA1Ve10HH3T8RyjpbE-8TlK7gSFiLzqmh-YYyJfxr3WZ8DpAXr_nFHcIPfu_oe1jRrIXWq3zmI8Oj_QtEWyWT5QMAAA==

[plgingras88]

Thanks, my eyesight has never stopped on that button (I'm the kind of guy who looks for the ketchup bottle for 5 minutes when it's right there ! 😅 ) but I have to admit I'm confused that the runes work without rune mode enabled? What kind of middle-ground is this ?

Also, as per documentation,

The easiest way to opt in to runes mode is to just start using them in your code.

I assumed it was the same behavior in the repl.

[Prinzhorn]

What kind of middle-ground is this ?

You can mix and match Svelte 4 and 5 in both directions. But I absolutely understand and share your confusion, your demo seems like a giant footgun. In reality your project should be compiled with runes being the default, so the issue would be less severe. But at the same time, what you're seeing has been the default for all prior Svelte versions including 4, objects were always considered dirty and caused an update. And even with this approach Svelte is insanely fast because the update will eventually become a noop and not touch the DOM.

[plgingras88]

Good to know ! Thanks for taking the time to reply, it's much appreciated! :)