$derived vs function in each block

[hermit99]

Describe the bug

I'm not sure if this is a bug or just something to discuss.

Essentially if I use a function directly in the each block, the function splitItem() is triggered twice whenever the item is mutated:

{#each splitItem(item) as it}
  <li>{it}</li>
{/each}

However it's as expected if I use $derived - splitItem() is called once when the item is changed. So I'm wondering why prop change triggered the callback twice in A.svelte?

Reproduction

Playground

Logs

No response

System Info

System:
    OS: Windows 11 10.0.26100
  Binaries:
    Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.15.3 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.86)
    Internet Explorer: 11.0.26100.1882

Severity

annoyance

[trueadm]

Has this since been fixed now?

[dummdidumm]

No, there's still a double invocation, the question is whether or not we can safely remove the second get call at the end of the each function, which would resolve this

[trueadm]

@dummdidumm Looks like we can't due to each blocks being special in that they mutate state internally which can cause the graph to become unstable.

[hermit99]

Has this since been fixed now?

Yeah I reckon it’s fixed with v5.17.4