Infinite loop with keyed each loop and bind:this

[macmillen]

Describe the bug

I found an infinite loop that happens when using an each loop in combination with bind:this inside the loop. This bug happens when adding a key to the loop which results in the reactive statement (here $: list) getting reevaluated.

Here is a simple example:

<!-- List.svelte -->

<script>
  export let data;
	
  let refs = [];

  $: list = data.reverse()
</script>

{#each list as { id }, index (id)} <!-- LOOP HERE because of (id) key -->
  <div bind:this={refs[index]}>
    content
  </div>
{/each}

<!-- App.svelte -->

<script>
  import List from "./List.svelte"
</script>

<List
  data={
    [ { id: "1" }, { id: "2" }, { id: "3" } ]
  }
/>

Reproduction

https://svelte.dev/repl/d375d7fb7a5c4df7b21f9fa60284dbad?version=3.44.1

Logs

No response

System Info

System:
    OS: Linux 5.11 KDE neon 5.23
    CPU: (6) x64 AMD FX(tm)-6300 Six-Core Processor
    Memory: 6.02 GB / 15.60 GB
    Container: Yes
    Shell: 3.1.0 - /usr/bin/fish
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.17.1/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
  Browsers:
    Brave Browser: 95.1.31.88
    Chrome: 95.0.4638.69
    Firefox: 94.0
  npmPackages:
    svelte: 3.44.1 => 3.44.1

Severity

annoyance

[Conduitry]

This should be fixed in 3.45.0 - https://svelte.dev/repl/d375d7fb7a5c4df7b21f9fa60284dbad?version=3.45.0