fix: improve signal consumer tracking behavior (#10121)

.changeset/loud-cheetahs-flow.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve signal consumer tracking behavior

packages/svelte/src/internal/client/runtime.js

@@ -456,10 +456,14 @@ function remove_consumer(signal, dependency, remove_unowned) {
 function remove_consumers(signal, start_index, remove_unowned) {
 	const dependencies = signal.d;
 	if (dependencies !== null) {
+		const active_dependencies = start_index === 0 ? null : dependencies.slice(0, start_index);
 		let i;
 		for (i = start_index; i < dependencies.length; i++) {
 			const dependency = dependencies[i];
-			remove_consumer(signal, dependency, remove_unowned);
+			// Avoid removing a consumer if we know that it is active (start_index will not be 0)
+			if (active_dependencies === null || !active_dependencies.includes(dependency)) {
+				remove_consumer(signal, dependency, remove_unowned);
+			}
 		}
 	}
 }

packages/svelte/tests/runtime-runes/samples/each-updates-2/_config.js

@@ -0,0 +1,40 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>Add Item</button>`,
+
+	async test({ assert, target }) {
+		const [btn1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+			btn1.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Add Item</button><button>Index 0\n|\nItem 0</button><button>Index 1\n|\nItem 1</button>`
+		);
+
+		let [btn2, btn3, btn4] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn4.click();
+			btn3.click();
+		});
+
+		assert.htmlEqual(target.innerHTML, `<button>Add Item</button>`);
+
+		let [btn5] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn5.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Add Item</button><button>Index 0\n|\nItem 2</button>`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/each-updates-2/main.svelte

@@ -0,0 +1,18 @@
+<script>
+	let arr = $state([]);
+	let counter = 0
+
+	function addItem() {
+		arr.push(`${counter++}`)
+	}
+
+	function removeItem(i) {
+		arr.splice(i, 1)
+	}
+</script>
+
+<button onclick={addItem}>Add Item</button>
+
+{#each arr as item, i}
+	<button onclick={() => removeItem(i)}>Index {i} | Item {item}</button>
+{/each}