Svelte 5: Reference to derived function does not trigger effect

[dnass]

Describe the bug

In Svelte 4, it's possible to do:

<script>
  let n = 0;
  $: func = () => n;
  $: func, console.log('func changed'); // Effect runs when n changes
</script>

<button on:click={() => n++}>Click</button>

The runes equivalent does not work:

<script>
  let n = $state(0);
  let func = $derived(() => n);
  $effect(() => {
    func, console.log('func changed'); // Effect does not run when n changes
  });
</script>

<button onclick={() => n++}>Click</button>

If func is called within the $effect callback, the effect runs. When it is only referenced, the effect does not run.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE32PwWrDMAyGX0WIQh0a2p3TJFD2GMsOnS0XU1cKsRIoIe8-vHTsMNqDDvr060Oa0YdICauPGfl8I6zw1PdYot773KSJohKWmGQcbCZ1skPote2400gKDA1skp6VzFtx_KV-ZJsHjoYwkTOmgKYFXgO5NuQ9WX0M5h-seasEK5wk0j7KxWwz0iAMLAqBJ7mS266apej4pcoUz2T_RfXh7y-uv0ZVYRC2MdhrMz_O3-2W9j2T-rAmWizxJi74QA4rHUZaPpdv_HowmFQBAAA=

Logs

No response

System Info

System:
    OS: macOS 14.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 361.81 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.13.1/bin/yarn
    npm: 10.5.2 - ~/.nvm/versions/node/v20.13.1/bin/npm
    pnpm: 9.11.0 - ~/.nvm/versions/node/v20.13.1/bin/pnpm
  Browsers:
    Brave Browser: 100.1.37.111
    Chrome: 128.0.6613.139
    Chrome Canary: 131.0.6728.0
    Safari: 18.0
  npmPackages:
    svelte: ^5.0.0-next.251 => 5.0.0-next.251

Severity

blocking an upgrade

[Conduitry]

I think one question here is whether () => n ought to be considered to change when n changes (and thus, whether func should be considered to change), and I don't know the answer to that. I'm thinking no, because evaluating () => n doesn't involve evaluating n, and so the dependence isn't established.

[brunnerh]

In Svelte 5 you generally should not need this pattern of capturing variables in functions via $: declarations.

Dependencies are automatically tracked across function boundaries, so the function itself not changing should not matter for practical applications.

E.g. this does not work in Svelte 4 but just does in Svelte 5:

<script>
	let n = 1;
	function double() {
		return n * 2;
	}
</script>

<button on:click={() => n++}>{n}</button>

Double: {double()}

If you have a realistic use case where it does matter, please explain it.

[paoloricciuti]

And if you really really need something like this you can use $derived.by

<script>
  let n = $state(0);
  let func = $derived.by(() => {
      n;
      return () => n;
   });
  $effect(() => {
    func, console.log('func changed'); // Effect does not run when n changes
  });
</script>

<button onclick={() => n++}>Click</button>

[Rich-Harris]

As often, the question here is 'what are you actually trying to do?'

[dnass]

Maybe it's an outlier, but my use case does rely on triggering an effect when a function's dependencies change. In my svelte-canvas library, users define reactive functions that encapsulate pieces of canvas rendering logic. When any render function's dependencies change, the library clears the canvas and then reruns each render function. Here's a simple example in Svelte 4.

The render functions could just rerun with every rAF tick, but that would cause wasteful renders where nothing has changed. @paoloricciuti's suggestion works, but it's extra boilerplate for users. Either solution feels like a compromise compared with what's possible in Svelte 4.

[paoloricciuti]

Maybe it's an outlier, but my use case does rely on triggering an effect when a function's dependencies change. In my svelte-canvas library, users define reactive functions that encapsulate pieces of canvas rendering logic. When any render function's dependencies change, the library clears the canvas and then reruns each render function. Here's a simple example in Svelte 4.

The render functions could just rerun with every rAF tick, but that would cause wasteful renders where nothing has changed. @paoloricciuti's suggestion works, but it's extra boilerplate for users. Either solution feels like a compromise compared with what's possible in Svelte 4.

I think you can change your library to just call the render function in an effect...by doing so every reactive variable inside the function will be registered as a dependency

[dnass]

The render functions run in a specific order. If the changed function is called in an effect, that will happen first, and then trigger every other function to re-render in order (including the changed function, at its actual position in the sequence). The upshot is that each changed render function would run twice per frame instead of once.

[paoloricciuti]

The render functions run in a specific order. If the changed function is called in an effect, that will happen first, and then trigger every other function to re-render in order (including the changed function, at its actual position in the sequence). The upshot is that each changed render function would run twice per frame instead of once.

Maybe I'm missing something but something like this could work I think

I've used a set but you could just as well use an array if you want to insert in specific places. Basically the point is: you shouldn't use the effect to trigger the chained render but just call every render in an effect... everytime something changes the whole chain will be rerun

[paoloricciuti]

@david-plugge is not exactly what you asked but i would probably change the api like this and warn in the docs about wrapping my components in if.

[dnass]

Here's how I handle it in the library: each layer renders a hidden div with an ID attribute. A mutation observer watches the divs and the render functions are called in the same order.

I've always wished there was a Svelte-ier way to do this, but I don't think there is.

[paoloricciuti]

Here's how I handle it in the library: each layer renders a hidden div with an ID attribute. A mutation observer watches the divs and the render functions are called in the same order.

I've always wished there was a Svelte-ier way to do this, but I don't think there is.

This is not a bad idea even tho it could introduce issues with css. But it should be rare enough. Are you rendering the divs inside the canvas?

[dnass]

Yeah, the Canvas component uses a slot inside a div with display: none, which prevents the layer divs from inheriting any unwanted styles.

[dnass]

Hey @paoloricciuti, sorry to revive an old thread but there's still one issue with this approach that I haven't been able to solve. Because effects are scheduled with queueMicrotask, there's no limit on how quickly they can fire. In some cases the canvas render callbacks can fire more than 60 times/second, which causes jank and dropped frames. I'm trying to find a way to throttle the effect so that it behaves like requestAnimationFrame but I'm stuck — $effect can't be called inside rAF, and rAF doesn't work inside an effect because values in asynchronous functions aren't tracked. Any idea how I could handle this?

[Conduitry]

I'm converting this to a discussion, as this has moved into "how can I achieve my specific use-case" territory.