-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Closed
Labels
Description
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