Key+each blocks leaking memory in legacy mode

[lassebomh]

Describe the bug

At my company we experienced tabs crashing due to running out of memory. The root cause is somewhere in svelte, and I was able to create a minimal reproducible example. The memory usage looks like this (over 40 seconds):

Reproduction

<script>
  const array = new Array(1000)
  let x = 0
  setInterval(() => x++, 10)
</script>

{#key x}
  {#each array as _}{/each}
{/key}

I have a repo here https://github.com/lassebomh/svelte-leak just in case. Its just the default project from pnpm create vite@latest . with unecessary stuff removed and the above code in App.svelte.

Run the project and open the memory devtools tab. Watch this number:

If x is wrapped in a $state then the memory usage looks like this, leading me to believe it's a legacy only issue:

Logs

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 9 6900HS with Radeon Graphics        
    Memory: 14.66 GB / 31.25 GB
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.3 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (134.0.3124.72)
    Internet Explorer: 11.0.26100.1882

Severity

annoyance

[7nik]

So, the reason is that in legacy mode, create_item (of the loop) ends up creating v as mutable_source, but mutable_source adds itself to the array component_context.l.s which is used for beforeUpdate and afterUpdate. Thus, in legacy mode, all ever created #each's items end up never garbage-collected.
#each REPL, #await REPL, class Component REPL