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?