Fix hydration-susepsnse crashing due to sCU bail

Author: JoviDeCroock

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

@@ -290,62 +290,47 @@ describe('suspense hydration', () => {
 		});
 	});
 
-	it('Should not crash when oldVNode._children is null during shouldComponentUpdate optimization', () => {
-		const originalHtml = '<div>Hello</div>';
-		scratch.innerHTML = originalHtml;
+	it('does not crash when a hydrated suspended component bails out with shouldComponentUpdate', () => {
+		scratch.innerHTML = '<div>ssr</div>';
 		clearLog();
 
-		class ErrorBoundary extends React.Component {
-			constructor(props) {
-				super(props);
-				this.state = { hasError: false };
-			}
+		const promise = new Promise(() => {});
+		let update;
 
-			static getDerivedStateFromError() {
-				return { hasError: true };
+		class Suspender extends React.Component {
+			shouldComponentUpdate() {
+				return false;
 			}
 
 			render() {
-				return this.props.children;
+				throw promise;
 			}
 		}
 
-		const [Lazy, resolve] = createLazy();
-		function App() {
-			return (
-				<Suspense>
-					<ErrorBoundary>
-						<Lazy />
-					</ErrorBoundary>
-				</Suspense>
-			);
-		}
-
-		hydrate(<App />, scratch);
-		rerender(); // Flush rerender queue to mimic what preact will really do
-		expect(scratch.innerHTML).to.equal(originalHtml);
-		expect(getLog()).to.deep.equal([]);
-		clearLog();
-
-		let i = 0;
-		class ThrowOrRender extends React.Component {
-			shouldComponentUpdate() {
-				return i === 0;
+		class App extends React.Component {
+			constructor(props) {
+				super(props);
+				this.state = { tick: 0 };
+				update = () => this.setState({ tick: this.state.tick + 1 });
 			}
+
 			render() {
-				if (i === 0) {
-					i++;
-					throw new Error('Test error');
-				}
-				return <div>Hello</div>;
+				return (
+					<Suspense fallback={<div>loading</div>}>
+						<Suspender tick={this.state.tick} />
+					</Suspense>
+				);
 			}
 		}
 
-		return resolve(ThrowOrRender).then(() => {
-			rerender();
-			expect(scratch.innerHTML).to.equal(originalHtml);
-			clearLog();
-		});
+		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', () => {

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 (