Extraneous DOM nodes created when using computed property with {#each} -loop

[arggh]

I bumped into a weird bug. I was using a computed property in an each loop to display either 3 or 2 items. This was implemented by either returning an array with 3 items, or a two item slice of the same array, based on a boolean value in component's state. When toggling state so that the computed property returns an array with two items instead of three, Svelte just keeps adding extra elements to DOM. If I keep toggling the state, I will end up with ∞ elements.

REPL Example: https://svelte.technology/repl?version=2.13.2&gist=56be5b00c35d6288467d2ab6db2d1cc0

[arggh]

Using a keyed each block fixes the issue, like so: https://svelte.technology/repl?version=2.13.2&gist=fef28b1aa79a99c52e37246eb8bda1e4

Maybe this is working as expected, maybe not. I still find the behavior in the non-keyed version quite unexpected.

[lowi]

I tried understanding the issue, and just doing this change make it work:
<div class="block block-{block}"></div> instead of <div class="block"></div>

But I have no idea why it fix the issue.

From the generated code, I suspect get_each_context is failing to find one of the block and creating a new one:

for (var i = 0; i < each_value.length; i += 1) {
	const child_ctx = get_each_context(ctx, each_value, i);
	if (each_blocks[i]) {
		each_blocks[i].p(changed, child_ctx);
	} else {
		each_blocks[i] = create_each_block(component, child_ctx);
		each_blocks[i].c();
		each_blocks[i].m(each_anchor.parentNode, each_anchor);
	}
}

[Rich-Harris]

Closing in favour of #3285, which is a v3 duplicate of this (and which is fixed by #3329)