fix: preserve hydration state when resuming suspended hydration

Author: ssssota

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

@@ -5,7 +5,8 @@ import React, {
 	Fragment,
 	Suspense,
 	memo,
-	useState
+	useState,
+	useSyncExternalStore
 } from 'preact/compat';
 import { logCall, getLog, clearLog } from '../../../test/_util/logCall';
 import {
@@ -98,6 +99,46 @@ describe('suspense hydration', () => {
 		});
 	});
 
+	it('should use the server snapshot when suspended hydration resumes', async () => {
+		scratch.innerHTML = '<div>server</div>';
+		clearLog();
+
+		const snapshots = [];
+		const [Lazy, resolve] = createLazy();
+
+		function StoreValue() {
+			const value = useSyncExternalStore(
+				() => () => {},
+				() => {
+					snapshots.push('client');
+					return 'client';
+				},
+				() => {
+					snapshots.push('server');
+					return 'server';
+				}
+			);
+			return <div>{value}</div>;
+		}
+
+		hydrate(
+			<Suspense>
+				<Lazy />
+			</Suspense>,
+			scratch
+		);
+		rerender();
+		expect(snapshots).to.deep.equal([]);
+
+		await resolve(() => <StoreValue />);
+		rerender();
+
+		const [first, ...rest] = snapshots;
+		expect(first).to.equal('server');
+		expect(rest.every(snap => snap === 'client')).to.equal(true);
+		expect(scratch.innerHTML).to.equal('<div>client</div>');
+	});
+
 	it('Should not crash when oldVNode._children is null during shouldComponentUpdate optimization', () => {
 		const originalHtml = '<div>Hello</div>';
 		scratch.innerHTML = originalHtml;

src/diff/index.js

@@ -83,6 +83,7 @@ export function diff(
 		(isHydrating = oldVNode._flags & MODE_HYDRATE) &&
 		oldVNode._component._excess
 	) {
+		newVNode._flags |= MODE_HYDRATE;
 		let excess = oldVNode._component._excess;
 		excessDomChildren = [];
 		if (excess.nodeType == 8) {