Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1657

Svelte $effect behaving differently in runes mode

$
0
0

Component in svelte 4:

<script>  let x = 1  let y = "less than 10"  function check(){    if(x > 10){      y = "more than 10"    }  }  $: {    check()  }</script><div>not runes<button onclick={() => x++ }>{x}</button>{y}</div>

Notice how the reactive statement calls a check function, so the reactive statement is never triggered because "x" is not directly called.

But in runes mode the $effect is triggered even if "x" does not directly appear in the effect body:

<script>  let x = $state(1);  let y = $state("less than 10");  function check(){    if(x > 10){      y = "more than 10"    }  }  $effect(() => {    check()  })</script><div>runes<button onclick={() => x++ }>{x}</button>{y}</div>

I guess this is change in how svelte effects work from 4 to 5, but I was wondering how does svelte know when to run the effect, when in runes mode? Does it look into the function code and check of reactive vars? What if I have a deeply nested function call, with a reactive var in the deepest function, will the effect still detect it?


Viewing all articles
Browse latest Browse all 1657

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>