fix: retry on Suspense render and preserve hook state

- If a parent rerenders while a child suspends, retry rerendering
  suspended children. This supports patterns like react-freeze where
  a never-resolving thenable freezes a subtree and a parent re-render
  clears it.

- Preserve hook state (useState, etc.) across suspend/unsuspend for
  already-mounted components. Discard hook state for components that
  suspend during initial mount (matching React's WIP fiber discard).

- Run effect cleanups (both useEffect and useLayoutEffect) uniformly
  during suspension. Effects rerun when unsuspended.

Author: mary-ext

compat/src/suspense.js

@@ -42,11 +42,21 @@ options.unmount = function (vnode) {
 function detachedClone(vnode, detachedParent, parentDom) {
 	if (vnode) {
 		if (vnode._component && vnode._component.__hooks) {
-			vnode._component.__hooks._list.forEach(effect => {
-				if (typeof effect._cleanup == 'function') effect._cleanup();
-			});
-
-			vnode._component.__hooks = null;
+			if (vnode._dom != null) {
+				// Already-mounted component: preserve hook state but run
+				// effect cleanups. Effects will rerun when unsuspended.
+				vnode._component.__hooks._list.forEach(effect => {
+					if (typeof effect._cleanup == 'function') {
+						effect._cleanup();
+						effect._cleanup = undefined;
+					}
+				});
+			} else {
+				// Component suspended during initial mount (never committed
+				// to DOM). Discard hook state entirely, matching React's
+				// behavior of discarding the WIP fiber.
+				vnode._component.__hooks = null;
+			}
 		}
 
 		vnode = assign({}, vnode);
@@ -206,7 +216,34 @@ Suspense.prototype.render = function (props, state) {
 			);
 		}
 
+		// Save reference to this vnode. After diffChildren, its _children
+		// array becomes the "old children" for future diffs. We need this
+		// reference to swap in original vnodes when retrying after suspension.
+		this._suspendedVNode = this._vnode;
 		this._detachOnNextRender = null;
+	} else if (state._suspended) {
+		// Parent re-rendered while suspended (not from _childDidSuspend).
+		// Try rendering children again. If they re-throw, _childDidSuspend
+		// will re-catch and re-suspend. This supports patterns like
+		// react-freeze where a never-resolving thenable is thrown to freeze
+		// a subtree and later cleared by a parent re-render.
+
+		// Restore the original vnode tree into the old children array
+		// so the diff can reuse existing component instances (preserving
+		// hook state like useState).
+		const suspendedVNode = state._suspended;
+		if (this._suspendedVNode && this._suspendedVNode._children) {
+			this._suspendedVNode._children[0] = removeOriginal(
+				suspendedVNode,
+				suspendedVNode._component._parentDom,
+				suspendedVNode._component._originalParentDom
+			);
+		}
+
+		this._suspendedVNode = null;
+		this._pendingSuspensionCount = 0;
+		this._suspenders = null;
+		state._suspended = null;
 	}
 
 	return [

compat/test/browser/suspense.test.jsx

@@ -159,58 +159,7 @@ describe('suspense', () => {
 		resolve().then(assert).catch(assert);
 	});
 
-	it('should reset hooks of components', () => {
-		/** @type {(v) => void} */
-		let set;
-		const LazyComp = ({ name }) => <div>Hello from {name}</div>;
-
-		/** @type {() => Promise<void>} */
-		let resolve;
-		const Lazy = lazy(() => {
-			const p = new Promise(res => {
-				resolve = () => {
-					res({ default: LazyComp });
-					return p;
-				};
-			});
-
-			return p;
-		});
-
-		const Parent = ({ children }) => {
-			const [state, setState] = useState(false);
-			set = setState;
-
-			return (
-				<div>
-					<p>hi</p>
-					{state && children}
-				</div>
-			);
-		};
-
-		render(
-			<Suspense fallback={<div>Suspended...</div>}>
-				<Parent>
-					<Lazy name="LazyComp" />
-				</Parent>
-			</Suspense>,
-			scratch
-		);
-		expect(scratch.innerHTML).to.eql(`<div><p>hi</p></div>`);
-
-		set(true);
-		rerender();
-
-		expect(scratch.innerHTML).to.eql('<div>Suspended...</div>');
-
-		return resolve().then(() => {
-			rerender();
-			expect(scratch.innerHTML).to.eql(`<div><p>hi</p></div>`);
-		});
-	});
-
-	it('should call effect cleanups', () => {
+	it('should call effect cleanups when suspending', () => {
 		/** @type {(v) => void} */
 		let set;
 		const effectSpy = vi.fn();
@@ -266,14 +215,14 @@ describe('suspense', () => {
 		set(true);
 		rerender();
 		expect(scratch.innerHTML).to.eql('<div>Suspended...</div>');
+		// Both effect types should have their cleanups called during suspension
 		expect(effectSpy).toHaveBeenCalledOnce();
 		expect(layoutEffectSpy).toHaveBeenCalledOnce();
 
 		return resolve().then(() => {
 			rerender();
 			expect(effectSpy).toHaveBeenCalledOnce();
 			expect(layoutEffectSpy).toHaveBeenCalledOnce();
-			expect(scratch.innerHTML).to.eql(`<div><p>hi</p></div>`);
 		});
 	});
 
@@ -2662,4 +2611,241 @@ describe('suspense', () => {
 		expect(renderCount).to.equal(renderCountAfterSuspend);
 		expect(scratch.innerHTML).to.equal('<div>Loading...</div>');
 	});
+
+	describe('suspension with never-resolving thenable', () => {
+		const neverResolve = { then() {} };
+
+		function ThrowWhen({ suspend, children }) {
+			if (suspend) {
+				throw neverResolve;
+			}
+			return createElement(Fragment, null, children);
+		}
+
+		it('should unsuspend when children stop throwing on parent re-render', () => {
+			/** @type {(v: boolean) => void} */
+			let setSuspend;
+			function App() {
+				const [suspend, ss] = useState(false);
+				setSuspend = ss;
+				return (
+					<Suspense fallback={<div>Loading...</div>}>
+						<ThrowWhen suspend={suspend}>
+							<div>Content</div>
+						</ThrowWhen>
+					</Suspense>
+				);
+			}
+
+			render(<App />, scratch);
+			expect(scratch.innerHTML).to.equal('<div>Content</div>');
+
+			act(() => setSuspend(true));
+			rerender();
+			expect(scratch.innerHTML).to.equal('<div>Loading...</div>');
+
+			act(() => setSuspend(false));
+			rerender();
+			expect(scratch.innerHTML).to.equal('<div>Content</div>');
+		});
+
+		it('should preserve child state across suspend/unsuspend', () => {
+			/** @type {(v: boolean) => void} */
+			let setSuspend;
+			/** @type {(v: number) => void} */
+			let setCount;
+
+			function Counter() {
+				const [count, sc] = useState(42);
+				setCount = sc;
+				return <div>Count: {count}</div>;
+			}
+
+			function App() {
+				const [suspend, ss] = useState(false);
+				setSuspend = ss;
+				return (
+					<Suspense fallback={<div>Loading...</div>}>
+						<ThrowWhen suspend={suspend}>
+							<Counter />
+						</ThrowWhen>
+					</Suspense>
+				);
+			}
+
+			render(<App />, scratch);
+			expect(scratch.innerHTML).to.equal('<div>Count: 42</div>');
+
+			act(() => setCount(100));
+			rerender();
+			expect(scratch.innerHTML).to.equal('<div>Count: 100</div>');
+
+			act(() => setSuspend(true));
+			rerender();
+			expect(scratch.innerHTML).to.equal('<div>Loading...</div>');
+
+			act(() => setSuspend(false));
+			rerender();
+			expect(scratch.innerHTML).to.equal('<div>Count: 100</div>');
+		});
+
+		it('should discard hook state for components suspending during initial mount', () => {
+			let resolve;
+			const LazyComp = ({ name }) => <div>Hello from {name}</div>;
+			const Lazy = lazy(() => {
+				const p = new Promise(res => {
+					resolve = () => {
+						res({ default: LazyComp });
+						return p;
+					};
+				});
+				return p;
+			});
+
+			/** @type {(v: boolean) => void} */
+			let set;
+			const Parent = ({ children }) => {
+				const [state, setState] = useState(false);
+				set = setState;
+				return (
+					<div>
+						<p>hi</p>
+						{state && children}
+					</div>
+				);
+			};
+
+			render(
+				<Suspense fallback={<div>Suspended...</div>}>
+					<Parent>
+						<Lazy name="LazyComp" />
+					</Parent>
+				</Suspense>,
+				scratch
+			);
+			expect(scratch.innerHTML).to.eql('<div><p>hi</p></div>');
+
+			// Enable children - triggers Lazy which suspends during mount
+			set(true);
+			rerender();
+			expect(scratch.innerHTML).to.eql('<div>Suspended...</div>');
+
+			return resolve().then(() => {
+				rerender();
+				// Parent's hook state is preserved (it was already mounted),
+				// so state is still true and Lazy renders.
+				expect(scratch.innerHTML).to.eql(
+					'<div><p>hi</p><div>Hello from LazyComp</div></div>'
+				);
+			});
+		});
+
+		it('should restore effects after unsuspend', () => {
+			/** @type {(v: boolean) => void} */
+			let setSuspend;
+
+			const effectSpy = vi.fn();
+			const cleanupSpy = vi.fn();
+			const layoutEffectSpy = vi.fn();
+			const layoutCleanupSpy = vi.fn();
+
+			function Child() {
+				useEffect(() => {
+					effectSpy();
+					return () => cleanupSpy();
+				});
+				useLayoutEffect(() => {
+					layoutEffectSpy();
+					return () => layoutCleanupSpy();
+				});
+				return <div>Child</div>;
+			}
+
+			function App() {
+				const [suspend, ss] = useState(false);
+				setSuspend = ss;
+				return (
+					<Suspense fallback={<div>Loading...</div>}>
+						<ThrowWhen suspend={suspend}>
+							<Child />
+						</ThrowWhen>
+					</Suspense>
+				);
+			}
+
+			act(() => {
+				render(<App />, scratch);
+			});
+			expect(scratch.innerHTML).to.equal('<div>Child</div>');
+			expect(effectSpy).toHaveBeenCalledTimes(1);
+			expect(layoutEffectSpy).toHaveBeenCalledTimes(1);
+
+			effectSpy.mockClear();
+			cleanupSpy.mockClear();
+			layoutEffectSpy.mockClear();
+			layoutCleanupSpy.mockClear();
+
+			act(() => setSuspend(true));
+			rerender();
+			expect(scratch.innerHTML).to.equal('<div>Loading...</div>');
+
+			// Both effect type cleanups should run during suspension
+			expect(layoutCleanupSpy).toHaveBeenCalledTimes(1);
+			expect(cleanupSpy).toHaveBeenCalledTimes(1);
+
+			effectSpy.mockClear();
+			cleanupSpy.mockClear();
+			layoutEffectSpy.mockClear();
+			layoutCleanupSpy.mockClear();
+
+			act(() => setSuspend(false));
+			rerender();
+			expect(scratch.innerHTML).to.equal('<div>Child</div>');
+			expect(effectSpy).toHaveBeenCalledTimes(1);
+			expect(layoutEffectSpy).toHaveBeenCalledTimes(1);
+		});
+
+		it('should not re-render suspended children when parent updates', () => {
+			/** @type {(v: boolean) => void} */
+			let setSuspend;
+			/** @type {(v: number) => void} */
+			let setParentCount;
+			const childRenderSpy = vi.fn();
+
+			function Child() {
+				childRenderSpy();
+				return <div>Child</div>;
+			}
+
+			function App() {
+				const [suspend, ss] = useState(false);
+				const [count, sc] = useState(0);
+				setSuspend = ss;
+				setParentCount = sc;
+				return (
+					<div>
+						<span>Parent: {count}</span>
+						<Suspense fallback={<div>Loading...</div>}>
+							<ThrowWhen suspend={suspend}>
+								<Child />
+							</ThrowWhen>
+						</Suspense>
+					</div>
+				);
+			}
+
+			act(() => {
+				render(<App />, scratch);
+			});
+			expect(childRenderSpy).toHaveBeenCalledTimes(1);
+
+			act(() => setSuspend(true));
+			rerender();
+			childRenderSpy.mockClear();
+
+			act(() => setParentCount(1));
+			rerender();
+			expect(childRenderSpy).not.toHaveBeenCalled();
+		});
+	});
 });