Prevent parent signal subscriptions during DOM diff (#979)

Author: andrewiggins

.changeset/calm-vnodes-listen.md

@@ -0,0 +1,5 @@
+---
+"@preact/signals": patch
+---
+
+Stop component tracking before Preact reconciles the returned VNode so Signals read by DOM property getters do not subscribe the parent component.

packages/preact/src/index.ts

@@ -200,6 +200,12 @@ Object.defineProperties(Signal.prototype, {
 
 /** Inject low-level property/attribute bindings for Signals into Preact's diff */
 hook(OptionsTypes.DIFF, (old, vnode) => {
+	// A component's tracking scope ends when its render function returns. The
+	// next VNode's DIFF hook is the first opportunity to stop tracking before
+	// Preact begins reconciling the returned VNode.
+	setCurrentUpdater();
+	currentComponent = undefined;
+
 	if (typeof vnode.type === "string") {
 		let signalProps: Record<string, any> | undefined;
 

packages/preact/test/browser/index.test.tsx

@@ -382,6 +382,41 @@ describe("@preact/signals", () => {
 			expect(spy).toHaveBeenCalledOnce();
 		});
 
+		it("should not subscribe to signals read by DOM property getters", () => {
+			const tag = `x-signal-value-${Math.random().toString(36).slice(2)}`;
+
+			class SignalValueElement extends HTMLElement {
+				internalValue = signal("initial");
+
+				get value() {
+					return this.internalValue.value;
+				}
+
+				set value(value: string) {
+					this.internalValue.value = value;
+				}
+			}
+
+			customElements.define(tag, SignalValueElement);
+
+			const renderSpy = vi.fn();
+			function App() {
+				renderSpy();
+				return createElement(tag, { value: "initial render" });
+			}
+
+			render(<App />, scratch);
+			const element = scratch.firstElementChild as SignalValueElement;
+			expect(element.value).to.equal("initial render");
+			renderSpy.mockClear();
+
+			element.internalValue.value = "user edit";
+			rerender();
+
+			expect(renderSpy).not.toHaveBeenCalled();
+			expect(element.value).to.equal("user edit");
+		});
+
 		it("should minimize rerenders when passing signals through context", () => {
 			function spyOn<P = { children?: ComponentChildren }>(
 				c: FunctionComponent<P>