Open vhtmui opened 13 hours ago
There's some unnecessary code in your example, so I just cleaned it up while preserving your main question:
<script>
let {display = true} = $props(); //case 1 - fires every time you press display
// let display = $state(true); //case 2 - fires once at the start
$effect(()=>{
display = true;
console.log("effect")
})
</script>
<button onclick={() => display = !display} >display</button>
{#if display}
<h1>Hello world</h1>
{/if}
This is a bit of an anti-pattern anyway. Generally speaking you should only really be using $effect for the edges of your application e.g. hitting an API point or something of the sort. For everything else, $deriveds, and more often than not just functions that call some stateful value, are all that's required and is the fastest, most efficient, and safest way to do things. I actually made a a video on this a while back that explains why.
Nevertheless, I'm actually a bit bamboozled myself by this. Even though it is an anti-pattern, I don't really see why $effect should be behaving differently, so I'm curious why this would be the case.
I would expect the effect to only be called once at the start since within the effect, the display
value at all should be being accessed at all, which is what's needed to set up the reactivity relationship. So that particular effect should not be reactive to anything... I think ?
Describe the bug
The $effect rune behaves differently when variables are declared in different places.
Consider this code:
In case 1,
display
declaration is in the $props statement, this will cause the$effect
statement runs everytime i click the button. In case 2,display
declaration as a reactive varriable, the$effect
statement will not runs one time.From my perspective,
$effect
should only run when the value of theif
statement changes, which is counterintuitive right now. I'm not sure if it's a feature or a bug, but I hope$effect
's behavior to be consistent in this two case. Because this work well in svelte 4 withafterUpdate
, it seems that$effect
cannot replaceafterUpdate
.Reproduction
https://svelte.dev/playground/8507880e5cb74c13a4d6dd67e645092a?version=5.0.5
Logs
No response
System Info
Severity
annoyance