[React] Don't track signals read during SSR render

.changeset/dirty-poets-cover.md

@@ -0,0 +1,5 @@
+---
+"@preact/signals-react": patch
+---
+
+Don't track signals read during an SSR render (e.g. renderToString, renderToStaticMarkup)

package.json

@@ -26,8 +26,8 @@
     "test:karma:watch": "karma start karma.conf.js --no-single-run",
     "test:karma:prod": "cross-env MINIFY=true NODE_ENV=production karma start karma.conf.js --single-run",
     "test:karma:prod:watch": "cross-env NODE_ENV=production karma start karma.conf.js --no-single-run",
-    "test:mocha": "cross-env COVERAGE=true mocha --require test/node/setup.js --recursive packages/*/test/node/**.test.tsx",
-    "test:mocha:prod": "cross-env COVERAGE=true NODE_ENV=production mocha --require test/node/setup.js --recursive packages/*/test/node/**.test.tsx",
+    "test:mocha": "cross-env COVERAGE=true mocha --require test/node/setup.js --recursive packages/*/test/node/**.test.tsx --recursive packages/react/runtime/test/node/**.test.tsx",
+    "test:mocha:prod": "cross-env COVERAGE=true NODE_ENV=production mocha --require test/node/setup.js --recursive packages/*/test/node/**.test.tsx --recursive packages/react/runtime/test/node/**.test.tsx",
     "docs:start": "cd docs && pnpm start",
     "docs:build": "cd docs && pnpm build",
     "docs:preview": "cd docs && pnpm preview",

packages/react/runtime/src/index.ts

@@ -285,6 +285,33 @@ function createEffectStore(_usage: EffectStoreUsage): EffectStore {
 	};
 }
 
+const noop = () => {};
+
+function createEmptyEffectStore(): EffectStore {
+	return {
+		_usage: UNMANAGED,
+		effect: {
+			_sources: undefined,
+			_callback() {},
+			_start() {
+				return /* endEffect */ noop;
+			},
+			_dispose() {},
+		},
+		subscribe() {
+			return /* unsubscribe */ noop;
+		},
+		getSnapshot() {
+			return 0;
+		},
+		_start() {},
+		f() {},
+		[symDispose]() {},
+	};
+}
+
+const emptyEffectStore = createEmptyEffectStore();
+
 const _queueMicroTask = Promise.prototype.then.bind(Promise.resolve());
 
 let finalCleanup: Promise<void> | undefined;
@@ -312,7 +339,11 @@ export function _useSignalsImplementation(
 
 	const storeRef = useRef<EffectStore>();
 	if (storeRef.current == null) {
-		storeRef.current = createEffectStore(_usage);
+		if (typeof window === "undefined") {
+			storeRef.current = emptyEffectStore;
+		} else {
+			storeRef.current = createEffectStore(_usage);
+		}
 	}
 
 	const store = storeRef.current;

packages/react/runtime/test/browser/useSignals.test.tsx

@@ -453,6 +453,32 @@ describe("useSignals", () => {
 		expect(scratch.innerHTML).to.equal("<div>Hello John!</div>");
 	});
 
+	it("should clean up signal dependencies after unmounting", async () => {
+		const getTargets = (s: any): any => s.t ?? s._targets;
+
+		const sig = signal(0);
+		function App() {
+			const effectStore = useSignals(/* MANAGED_COMPONENT */ 1);
+			try {
+				return <p>{sig.value}</p>;
+			} finally {
+				effectStore.f();
+			}
+		}
+
+		expect(getTargets(sig)).to.be.undefined;
+
+		await render(<App />);
+		expect(scratch.innerHTML).to.equal("<p>0</p>");
+		expect(getTargets(sig)).to.be.not.null.and.not.undefined;
+
+		act(() => root.unmount());
+		expect(scratch.innerHTML).to.equal("");
+
+		await Promise.resolve();
+		expect(getTargets(sig)).to.be.undefined;
+	});
+
 	// TODO: Figure out what to do here...
 	it.skip("(managed) should work with components that use render props", async () => {
 		function AutoFocusWithin({

packages/react/runtime/test/node/renderToStaticMarkup.test.tsx

@@ -1,4 +1,5 @@
-import { signal, useSignalEffect } from "@preact/signals-react";
+import { signal, useSignalEffect } from "../../../";
+import { useSignals } from "./../../../runtime";
 import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { mountSignalsTests } from "../../../test/shared/mounting";
@@ -21,4 +22,26 @@ describe("@preact/signals-react/runtime", () => {
 			expect(spy.called).to.be.false;
 		});
 	});
+
+	it("should clean up signal dependencies after executing", async () => {
+		const getTargets = (s: any): any => s.t ?? s._targets;
+
+		const sig = signal(0);
+		function App() {
+			const effectStore = useSignals(/* MANAGED_COMPONENT */ 1);
+			try {
+				return <p>{sig.value}</p>;
+			} finally {
+				effectStore.f();
+			}
+		}
+
+		expect(getTargets(sig)).to.be.undefined;
+
+		const html = renderToStaticMarkup(<App />);
+		expect(html).to.equal("<p>0</p>");
+
+		await Promise.resolve();
+		expect(getTargets(sig)).to.be.undefined;
+	});
 });