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
Svelte 5: When spread object passed to components changes all the output of $props is updated instead of only the necessary stuff #11286
Comments
Interestingly the order of the props matters: repl |
@trueadm Here's another example of a problem I think has to do with the same thing and it's weird. <script lang="ts">
import { onMount } from "svelte";
let { open = $bindable(false), about, somethingElse }: { open?: boolean; about?: string; somethingElse?: number } = $props();
// $inspect(open);
$effect(() => {
console.log(open);
});
onMount(() => {
setTimeout(() => {
open = true;
}, 3000);
});
</script> And this is our +page where I'm simulating the spreading of 2 different objects based on a condition. <script lang="ts">
import Test from "$components/Test/Test.svelte";
import { onMount } from "svelte";
let boolVar = $state(false);
onMount(() => {
setTimeout(() => {
boolVar = true;
}, 5000);
});
</script>
<Test {...boolVar ? {} : { about: "hello", somethingElse: 2 }}></Test> Now after 3 seconds, we are simulating a change from inside Test that sets open to true, then wait for the setTimeout inside page to change the |
Just to clarify the behaviour: the reason effects rerun when you reassign a spread is because they need to check if the new shape of the object is overriding a prop. In my PR I limited this by listening to a derived of the keys of the object so that it's only rerunning when the keys change. However it would still need to rerun in both cases you proposed. |
but aren't props like open or about primitives? shouldn't it run when the value changes? there is no mention of the parent object inside the $effect. |
What I mean is this: <Child open={true} {...rest} />
<button onclick={()=> rest = { open: false }}>change</button> So if inside the effect you access open you have an implicit dependency on the object because it the object changes open could change |
Describe the bug
When
{...restProps}
passed to a component changes, all the other props also elicit a reaction even though nothing is changed.This false signal causes components to almost completely render again which is a waste of resources and can also cause bugs.
Reproduction
lets say we have the following component
// Test.svelte
And in our +page we render it like below
Now changing
restProps
will cause the $effect that is looking at the primitive value ofabout
to run again and this happens for all props.If our
restProps
is the output of a $derived then it will be a new object every time that derived runs again which means any reactive code inside Test runs again.One bug that this can cause is for example if you have a functionality that is based on changes to a prop then that functionality will run again even though the user didn't change that prop at all. for instance, In the following example from the documentation that uses the
writable derived
method which is supposed to update the value offacade
whenever the incoming propvalue
changes but also allow for changes tofacade
from within the component, The false signal causes the getter to go off even though the value prop was not changed by the user which results infacade
to have the wrong value.// +page.svelte
Here try to change the value of
Test input
then wait 5 seconds to witness that even without typing in the+page input
the value ofTest input
changes to+page input
's value because restProps was changedREPL
Logs
No response
System Info
Severity
annoyance
The text was updated successfully, but these errors were encountered: