Fix suspense crash

Author: JoviDeCroock

compat/src/suspense.js

@@ -236,6 +236,7 @@ Suspense.prototype.render = function (props, state) {
  * @returns {((unsuspend: () => void) => void)?}
  */
 export function suspended(vnode) {
+	if (!vnode._parent) return null;
 	/** @type {import('./internal').Component} */
 	let component = vnode._parent._component;
 	return component && component._suspended && component._suspended(vnode);

compat/test/browser/suspense.test.js

@@ -2188,6 +2188,129 @@ describe('suspense', () => {
 		});
 	});
 
+	it('should not crash when suspended child updates after unmount', () => {
+		let childInstance = null;
+		const neverResolvingPromise = new Promise(() => {});
+
+		class ThrowingChild extends Component {
+			constructor(props) {
+				super(props);
+				this.state = { suspend: false, value: 0 };
+				childInstance = this;
+			}
+
+			render(props, state) {
+				if (state.suspend) {
+					throw neverResolvingPromise;
+				}
+				return <div>value:{state.value}</div>;
+			}
+		}
+
+		render(
+			<Suspense fallback={<div>Suspended...</div>}>
+				<ThrowingChild />
+			</Suspense>,
+			scratch
+		);
+
+		expect(scratch.innerHTML).to.equal('<div>value:0</div>');
+
+		childInstance.setState({ suspend: true });
+		rerender();
+		expect(scratch.innerHTML).to.equal('<div>Suspended...</div>');
+
+		render(null, scratch);
+		expect(scratch.innerHTML).to.equal('');
+
+		childInstance.setState({ value: 1 });
+		rerender();
+
+		expect(scratch.innerHTML).to.equal('');
+	});
+
+	it('should not crash when suspense promise resolves after unmount', () => {
+		let resolve;
+		const promise = new Promise(r => {
+			resolve = r;
+		});
+
+		class ThrowingChild extends Component {
+			render() {
+				throw promise;
+			}
+		}
+
+		render(
+			<Suspense fallback={<div>Suspended...</div>}>
+				<ThrowingChild />
+			</Suspense>,
+			scratch
+		);
+		rerender();
+
+		expect(scratch.innerHTML).to.equal('<div>Suspended...</div>');
+
+		render(null, scratch);
+		expect(scratch.innerHTML).to.equal('');
+
+		resolve();
+
+		return promise.then(() => {
+			rerender();
+			expect(scratch.innerHTML).to.equal('');
+		});
+	});
+
+	it('should not crash when useContext is used in a suspending component', () => {
+		const TestContext = createContext('default');
+		let resolve;
+		let shouldSuspend = false;
+		const promise = new Promise(r => {
+			resolve = r;
+		});
+
+		function ContextUser() {
+			const value = React.useContext(TestContext);
+			if (shouldSuspend) {
+				throw promise;
+			}
+			return <div>Context: {value}</div>;
+		}
+
+		render(
+			<TestContext.Provider value="test-value">
+				<Suspense fallback={<div>Suspended...</div>}>
+					<ContextUser />
+				</Suspense>
+			</TestContext.Provider>,
+			scratch
+		);
+
+		expect(scratch.innerHTML).to.equal('<div>Context: test-value</div>');
+
+		shouldSuspend = true;
+		render(
+			<TestContext.Provider value="test-value">
+				<Suspense fallback={<div>Suspended...</div>}>
+					<ContextUser />
+				</Suspense>
+			</TestContext.Provider>,
+			scratch
+		);
+		rerender();
+
+		expect(scratch.innerHTML).to.equal('<div>Suspended...</div>');
+
+		shouldSuspend = false;
+		resolve();
+
+		return promise.then(() => {
+			rerender();
+			expect(scratch.innerHTML).to.equal('<div>Context: test-value</div>');
+		});
+	});
+
 	it('should not crash if fallback has same DOM as suspended nodes', () => {
 		const [Lazy, resolveLazy] = createLazy();