Fix hydration-suspense crash due to sCU bailout

Assisted-By: devx/f79ddc2d-9f3b-44d1-85dc-4cb2c75c5ad5

Author: JoviDeCroock

compat/src/internal.d.ts

@@ -48,4 +48,5 @@ export interface SuspenseComponent extends PreactComponent<
 	_pendingSuspensionCount: number;
 	_suspenders: Component[];
 	_detachOnNextRender: null | VNode<any>;
+	_mask?: [number, number];
 }

compat/src/suspense.js

@@ -199,12 +199,12 @@ Suspense.prototype.componentWillUnmount = function () {
  */
 Suspense.prototype.render = function (props, state) {
 	let vnode = this._vnode;
-	if (!vnode._mask) {
+	if (!vnode._mask && !(vnode._mask = this._mask)) {
 		let root = vnode;
 		while (root._parent) root = root._parent;
 
 		root = root._mask || (root._mask = [0, 0]);
-		vnode._mask = [root[1]++, 0];
+		vnode._mask = this._mask = [root[1]++, 0];
 	}
 
 	if (this._detachOnNextRender) {

compat/test/browser/suspense-hydration.test.jsx

@@ -266,6 +266,60 @@ describe('suspense hydration', () => {
 		expect(ids[1]).to.equal('P1-0');
 	});
 
+	it('keeps Suspense useId masks stable across updates while hydration is suspended', async () => {
+		let shouldSuspend = false;
+		let resolvePromise;
+		let suspendPromise;
+		let update;
+		let renderedIds = [];
+
+		function Field() {
+			const id = useId();
+			renderedIds.push(id);
+			return <form id={id}>Pay</form>;
+		}
+
+		function MaybeSuspend() {
+			if (shouldSuspend) {
+				throw suspendPromise;
+			}
+			return <Field />;
+		}
+
+		function App() {
+			const [tick, setTick] = useState(0);
+			update = () => setTick(tick + 1);
+			return (
+				<Suspense fallback={null}>
+					<MaybeSuspend tick={tick} />
+				</Suspense>
+			);
+		}
+
+		const html = renderToString(<App />);
+		const serverId = /id="([^"]+)"/.exec(html)[1];
+		scratch.innerHTML = html;
+
+		renderedIds = [];
+		shouldSuspend = true;
+		suspendPromise = new Promise(resolve => {
+			resolvePromise = resolve;
+		});
+		hydrate(<App />, scratch);
+		rerender();
+
+		update();
+		rerender();
+
+		shouldSuspend = false;
+		resolvePromise();
+		await Promise.resolve();
+		await new Promise(resolve => setTimeout(resolve));
+		rerender();
+
+		expect(renderedIds).to.deep.equal([serverId]);
+	});
+
 	it('should leave DOM untouched when suspending while hydrating', () => {
 		scratch.innerHTML = '<div>Hello</div>';
 		clearLog();
@@ -348,6 +402,49 @@ describe('suspense hydration', () => {
 		});
 	});
 
+	it('does not crash when a hydrated suspended component bails out with shouldComponentUpdate', () => {
+		scratch.innerHTML = '<div>ssr</div>';
+		clearLog();
+
+		const promise = new Promise(() => {});
+		let update;
+
+		class Suspender extends React.Component {
+			shouldComponentUpdate() {
+				return false;
+			}
+
+			render() {
+				throw promise;
+			}
+		}
+
+		class App extends React.Component {
+			constructor(props) {
+				super(props);
+				this.state = { tick: 0 };
+				update = () => this.setState({ tick: this.state.tick + 1 });
+			}
+
+			render() {
+				return (
+					<Suspense fallback={<div>loading</div>}>
+						<Suspender tick={this.state.tick} />
+					</Suspense>
+				);
+			}
+		}
+
+		hydrate(<App />, scratch);
+		expect(scratch.innerHTML).to.equal('<div>ssr</div>');
+
+		update();
+		expect(() => rerender()).not.to.throw();
+		expect(scratch.innerHTML).to.equal('<div>ssr</div>');
+		expect(getLog()).to.deep.equal([]);
+		clearLog();
+	});
+
 	it('should leave DOM untouched when suspending while hydrating', () => {
 		scratch.innerHTML = '<!-- test --><div>Hello</div>';
 		clearLog();

src/diff/index.js

@@ -303,21 +303,20 @@ export function diff(
 						excessDomChildren[excessDomChildren.indexOf(oldDom)] = NULL;
 					}
 					newVNode._dom = oldDom;
-				} else {
-					if (excessDomChildren != NULL) {
-						for (let i = excessDomChildren.length; i--; ) {
-							removeNode(excessDomChildren[i]);
-						}
+				} else if (excessDomChildren != NULL) {
+					for (let i = excessDomChildren.length; i--; ) {
+						removeNode(excessDomChildren[i]);
 					}
-					markAsForce(newVNode);
 				}
 			} else {
 				newVNode._dom = oldVNode._dom;
-				if (!newVNode._children && oldVNode._children) {
-					newVNode._children = oldVNode._children;
-				}
-				if (!e.then) markAsForce(newVNode);
 			}
+
+			if (newVNode._children == NULL) {
+				newVNode._children = oldVNode._children || [];
+			}
+
+			if (!e.then) markAsForce(newVNode);
 			options._catchError(e, newVNode, oldVNode);
 		}
 	} else if (