Clarify deferred subscription replay

Assisted-By: devx/e0620a8d-8624-4748-b9c7-ce390238fc37

Author: JoviDeCroock

mangle.json

@@ -65,7 +65,9 @@
       "$_signal": "s",
       "$_updater": "__$u",
       "$_updateFlags": "__$f",
-      "$_updaters": "U"
+      "$_updaters": "U",
+      "$_subscribers": "u",
+      "$_usage": "o"
     }
   }
 }

packages/react/runtime/src/index.ts

@@ -121,6 +121,8 @@ function startComponentEffect(
 		this: Signal,
 		node: SubscriptionNode
 	) {
+		// Only defer this effect's direct dependencies. Computed dependencies are
+		// subscribed recursively when their direct node is committed.
 		if ((node as { _target: Effect })._target === nextStore.effect) {
 			nextStore._subscribers.push({ signal: this, node });
 		}
@@ -331,7 +333,6 @@ function createEffectStore(
 		},
 		[symDispose]() {
 			this.f();
-			this._subscribers = [];
 		},
 	};
 
@@ -408,10 +409,12 @@ export function _useSignalsImplementation(
 	if (_usage === UNMANAGED) useIsomorphicLayoutEffect(cleanupTrailingStore);
 
 	useIsomorphicLayoutEffect(() => {
+		// Detach first because subscribing can synchronously invoke user callbacks.
 		const subscribers = store._subscribers;
 		store._subscribers = [];
 
 		subscribers.forEach(({ signal, node }) => {
+			// Nodes omitted from the committed render are marked with version -1.
 			if (
 				(node as { _target: Effect })._target === store.effect &&
 				(node as { _version: number })._version !== -1

packages/react/runtime/test/browser/subscription-lifecycle.test.tsx

@@ -202,22 +202,31 @@ describe("subscription lifecycle", () => {
 		expect(getTargets(tracked)).to.equal(undefined);
 	});
 
-	it("restores the subscribe implementation active before rendering", async () => {
+	it("restores and invokes the subscribe implementation active before rendering", async () => {
+		const tracked = signal(0);
+		let wrapperCallCount = 0;
 		function subscribeWrapper(
 			this: Signal,
 			node: Parameters<Signal["_subscribe"]>[0]
 		) {
+			wrapperCallCount++;
 			return originalSubscribe.call(this, node);
 		}
 		Signal.prototype._subscribe = subscribeWrapper;
-		const pending = new Promise<void>(() => {});
+		let resolve!: () => void;
+		let resolved = false;
+		const pending = new Promise<void>(r => {
+			resolve = r;
+		});
 		let restoredWrapper = false;
 
 		/** @noUseSignals */
 		function App(): JSX.Element {
 			const store = useSignals(1);
 			try {
-				throw pending;
+				const value = tracked.value;
+				if (!resolved) throw pending;
+				return <p>{value}</p>;
 			} finally {
 				store.f();
 			}
@@ -232,11 +241,18 @@ describe("subscription lifecycle", () => {
 				);
 			});
 			restoredWrapper = Signal.prototype._subscribe === subscribeWrapper;
+
+			resolved = true;
+			await act(async () => {
+				resolve();
+				await pending;
+			});
 		} finally {
 			Signal.prototype._subscribe = originalSubscribe;
 		}
 
 		expect(restoredWrapper).to.equal(true);
+		expect(wrapperCallCount).to.equal(1);
 	});
 
 	it("restores the prototype before rendering an error boundary", async () => {