Skip to content

Infinite loop with keyed each loop and bind:this #6921

@macmillen

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugcompilerChanges relating to the compiler

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions