Destructuring unexpectedly breaks rune reactivity

[jonatansberg]

Describe the bug

I'm so happy to see Svelte 5 finally out the door. Great job everyone involved!

I have been trying to familiarise myself with how runes work. More specifically how you would build something that enables reuse of reactive things. In doing so I almost immediately stumbled upon this issue, and it took me quite some time to even figure out what was wrong.

If count refers to a $state rune exposed by counter, this will work:

const c = counter();
$inspect(c.count);

And that will silently fail when the state is updated:

const { count }  = counter();
$inspect(count);

Maybe the reason for this is obvious if you know how this is implemented under the hood, but for me this completely breaks my mental model for what's safe to do or not. If the destructuring case can't be fixed for whatever reason, then some sort of linting rule or compiler warning (like for other rune foot guns) would help a lot! A mention in the docs wouldn't hurt either.

Reproduction

https://svelte.dev/playground/a38340b5fd194cc685de720ed613c0e6?version=5.1.2

System Info

Svelte version 5.1.2

Severity

annoyance

[adiguba]

Hello,

This is normal because with detructuring you create a distinct copy of the variable.

Something like this in pure JS :

	let object = { count: 0 };
	let { count } = object;
	// or
	// let count = object.count;

	object.count++;

	console.log(object.count); // 1
	console.log(count);        // 0

But with Svelte you can link the two variables using $derived :

https://svelte.dev/playground/a38340b5fd194cc685de720ed613c0e6?version=5.1.2#H4sIAAAAAAAACnWSYW-CMBCG_0rTLNFFhO0rQ5Jl-xdjH7SeWodt0x7OhfDfd20RcboQ6OXued_Su7ZcLQ_Ac_4ODm0jsLFSbZle7UGgY0IrXErlU7ZR4HjCN7KmNf9oOf4Yr_QJyvc-r8ak7gg1-txq6eBe3tuCQrLhRUzm2qDUysVtWFZWqlKFE1Ya9DHKg9EWWUu_1JDYso5trD6wSZr1md4-3bvJi1fQJg6ZYIuzZPo4yvdGCZNKWDiAD9fQh2S-YA9rsPII66kIOlI-SOUM9WVa8SCueBJdovG4nF6AdECK7HIgVeyey0vTYR2dmHQ5a0PYFRkhBJryLZS-Je50g_Sbo1F5Oj3zxuOrBlErppWopfhatMMBu3JWZLF6jxtO35XzgaNhIZyQ57QjdMk_Q7-ZwPXs75VHVwBOYbSbRgl_By7jYq1vaw3IHC4R_ExCMH2KDfevBeqDimSFW2KD_Cz2T48EadRhl8R16M2YD-Bs9gcd2nODzudn1C_06a679tn9AutIjYFmAwAA

[brunnerh]

Duplicate of:

• Destructuring reactive components cause $state not being reactive #13295

[jonatansberg]

Hmm. My mental model has been that you should be able to pass things by reference given that the runes return Proxies. I think this could deserve a mention in the docs somewhere. The linked issue mentions this being in there, but that section seems to have been removed.

While having to do const { count } = $derived(getCounter()) works it's far from intuitive (and quite ugly). It also really undermines the whole spiel that you can just take your component code, put that in a separate function, call that and then it all just works (tm).

I'd be happy to write something, but I'm honestly still having a hard time wrapping my head around this.

[adiguba]

Pass by reference only work for object.
Here your count is a number, and with destructuring you lost the link with the value in the object.

This is not a Svelte thing, that's just how destructuring work in Javascript...

[jonatansberg]

That’s exactly my point.

With only a superficial (and seemingly broken) understanding of how the signals and proxies and what not work, my expectation is not for the state to be passed by value. The $state rune looks like something that ought to return an object, even if I provide a primitive initial value. Like stores in “classic” Svelte or refs and state in most other front end frameworks.

I think some sort of guidance on this in the docs (and potentially linting) would be really valuable.

[brunnerh]

Feel free to open a new documentation issue pointing out what you find to be missing; you can of course also make some suggestions on what could be added to improve the situation.