Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is this a bug or is this a feature of Svelte reactivity statements? #7749

Closed
siroBS opened this issue Aug 3, 2022 · 9 comments
Closed

Is this a bug or is this a feature of Svelte reactivity statements? #7749

siroBS opened this issue Aug 3, 2022 · 9 comments

Comments

@siroBS
Copy link

siroBS commented Aug 3, 2022

Describe the bug

App.svelte:

<script>
  import Child from "./Child.svelte";
	
  let data = {};	
  let dataNew = {};
</script>

<Child
  bind:data
  bind:dataNew
/>

Child.svelte:

<script>
  export let data;
  export let dataNew;
	
  $: if (data) {
    console.log("--- WTF? ---");
  }
	
  $: if (data) {
    console.log("--- WTF Trigger ---");
    dataNew = {};
  }

</script>

<button on:click={()=>{console.log("Clicked");dataNew=dataNew}}>
  Click me
</button>

Output on button click:

"Clicked"
"--- WTF? ---"
"--- WTF Trigger ---"

Related StackOverflow

It seems that this only happens when passing (binding) a non primitive values (objects, arrays).
The data of "data" not changed, why both statements have been triggered in Child.svelte component?
Looks like a bug...

Reproduction

https://svelte.dev/repl/87031a5efc554b7fba7ea177b6b30b81?version=3.49.0

Logs

No response

System Info

Svelte version: 3.49.0

Severity

annoyance

@Prinzhorn
Copy link
Contributor

Prinzhorn commented Aug 3, 2022

#5689

Even if you remove the button, you get two logs, which is the original bug. Svelte triggers updates for no reason when binding objects.

@siroBS
Copy link
Author

siroBS commented Aug 3, 2022

Prinzhorn,
Yep
Not only binding, passing too

@Prinzhorn
Copy link
Contributor

Can you elaborate and provide a REPL? You"re saying you see unnecessary updates without using bind: at all?

@siroBS
Copy link
Author

siroBS commented Aug 3, 2022

Can you elaborate and provide a REPL? You"re saying you see unnecessary updates without using bind: at all?

Please,
Issue with passing args to child

@Prinzhorn
Copy link
Contributor

Thanks, this looks like a different bug to me (there might already be a duplicate issue though).

For some reason Svelte invalidates the expression used in the condition. If you do this:

-	$: if (data) {
+	$: if (true) {
		console.log("--- WTF-Trigger---");
		dataNew = [{key: 1, val: "1"}];
	}

then nothing is logged. Which doesn"t make sense, because data is const throughout the entire application. It is never changed, but Svelte invalidates it anyway.

@Prinzhorn
Copy link
Contributor

Seems closely related to this #7129 (comment)

@siroBS
Copy link
Author

siroBS commented Aug 3, 2022

Interesting, with a primitive attributes does nothing going on like this. Looks like a hidden linking (bounding) under the hood, that causes Svelte to track passed arguments as a single object. And what is even more interesting is that if we change in the click handler to the SAME assignment (even though the value of the ENTIRE object "data" also changes), but the object is not itself, the problem also disappears.
Unfortunately, I don"t have the resources to dive further into the problem and do research, but this may be the root of the problem.
REPL

@jawher
Copy link

jawher commented Aug 21, 2022

In case it might be useful: here"s another eample where this issue manifests itself:

According to a comment on the linked stackoverlow question, this bug seems to have been introduced after the 3.2.0 release: the same eample linked above works with that version: https://svelte.dev/repl/d07ffc88e4a34cb797d2ceb6ba0ec6a4?version=3.2.0

Edit: the bug can be reproduced with 3.2.1, so that"s where it was probably introduced: v3.2.0...v3.2.1

@dummdidumm
Copy link
Member

This will be fixed in Svelte 5 through tracking dependencies more correctly at runtime

@dummdidumm dummdidumm added this to the 5.x milestone Nov 15, 2023
@benmccann benmccann modified the milestones: 5.x, 5.0 Nov 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants