Binding in slotted compoment triggers reactive statements twice

[zqianem]

Describe the bug
When a variable is bound to a slotted component, changing that variable within the slotted component causes any reactive statements inside the slotted component to trigger twice.

To Reproduce
https://svelte.dev/repl/df6fe28c60e84c26a141debf305ed114?version=3.30.0

Expected behavior
Pressing the "Update x" button should cause only one console.log call, which is what happens when the <Wrapper> is removed.

Severity
Low — can work around this by using a store instead of binding.

[non25]

This is known complex types binding behavior.
Nothing to do with slotting.
Change to primitive like number and it will work once.

Workarounds

Binding arrays: use immutable in child component like this.
https://svelte.dev/repl/e4bd72b1ad5c4a4da4a76a32241ba180

Binding objects fields:

$: doSomething(obj.foo);

let prevFoo;
$: if (obj.foo !== prevFoo ) {
  prevFoo = obj.foo;
  doSomething(obj.foo);
}

or:

$: foo = obj.foo;
$: doSomething(foo);

[zqianem]

This is known complex types binding behavior.
Nothing to do with slotting.
Change to primitive like number and it will work once.

I don't think this is true in this case. In the original repl, not using the slot by removing <Wrapper> changes the behavior from two console.log calls per "Update x" button press to one. Changing x to a primitive actually causes no console.log calls. (I suspect Svelte checks if the value has changed if it is a primitive, since the assignment in the original repl is just x = x.)

[al6x]

This Stack Overflow Question Why Svelte component updated variable, where in reality it didn't changed?
could be related.

[blairn]

It is VERY much a slot thing, replicated in https://svelte.dev/repl/2634d07aefa9465ea4ea7ec4bf810e8c?version=3.44.1

remove the slot and the behaviour vanishes.
remove the bind and the behaviour vanishes.
change the variable to a primitive and the behaviour vanishes.

[Theo-Steiner]

This is known complex types binding behavior.
Nothing to do with slotting.
Change to primitive like number and it will work once.

I don't think this is true in this case. In the original repl, not using the slot by removing <Wrapper> changes the behavior from two console.log calls per "Update x" button press to one. Changing x to a primitive actually causes no console.log calls. (I suspect Svelte checks if the value has changed if it is a primitive, since the assignment in the original repl is just x = x.)

You are seeing this behavior because reactivity for objects (arrays) works fundamentally different for objects than for primitive types.
See this REPL for a demonstration of this.
Therefore as @blairn and @non25 pointed out, this seems to be indeed a problem with the reactivity of non-primitive types inside components that are embedded into a slot.

[iacore]

@zqianem This issue apparently fixed now. Seems like properties are cached and compared to previous value using ===. The example in the first comment of this issue only outputs 0 once (or never) inside REPL.

[zqianem]

@zqianem This issue apparently fixed now. Seems like properties are cached and compared to previous value using ===. The example in the first comment of this issue only outputs 0 once (or never) inside REPL.

Testing the original REPL with the latest of version of Svelte and the issue remains:
https://svelte.dev/repl/df6fe28c60e84c26a141debf305ed114?version=3.44.3

I'm not seeing 0 as an output anywhere (nor should it be?)

[iacore]

@zqianem Sorry, I changed x to a number, and it worked. It seems like only arrays and objects trigger double update, while numbers like 0 or NaN works correctly.

Here's with let x = x + 1:
https://svelte.dev/repl/ae1d64a4ac874b619671937f86950b82?version=3.44.3

[iacore]

Related issuue: #3617

[iacore]

The current architecture of Svelte propagates redraw through components without checking if has been updated. So if you have two path in the dependency graph.

main -> wrapper -> slot
and
main -> slot

One way to solve this is to send the origin component id and component event id together, like main-frame-0 for one value update.

[zqianem]

This issue seems to have been partially fixed by #7981.

Now, the initial page load in the reproduction only prints "{}" once instead of twice. However, button presses still cause two prints. Compare the following:

Original: https://svelte.dev/repl/df6fe28c60e84c26a141debf305ed114?version=3.30.0
New: https://svelte.dev/repl/df6fe28c60e84c26a141debf305ed114?version=3.54.0

[dummdidumm]

This will be fixed in Svelte 5 - but also, slots will be deprecated in favor of the more powerful and easier to use snippets