fix useSyncExternalStore relying on changed render values

compat/src/index.js

@@ -136,8 +136,13 @@ export const useInsertionEffect = useLayoutEffect;
 export function useSyncExternalStore(subscribe, getSnapshot) {
 	const [state, setState] = useState(getSnapshot);
 
-	// TODO: in suspense for data we could have a discrepancy here because Preact won't re-init the "useState"
-	// when this unsuspends which could lead to stale state as the subscription is torn down.
+	const value = getSnapshot();
+
+	useLayoutEffect(() => {
+		if (value !== state) {
+			setState(() => value);
+		}
+	}, [subscribe, value, getSnapshot]);
 
 	useEffect(() => {
 		return subscribe(() => {

compat/test/browser/hooks.test.js

@@ -4,7 +4,9 @@ import React, {
 	useInsertionEffect,
 	useSyncExternalStore,
 	useTransition,
-	render
+	render,
+	useState,
+	useCallback
 } from 'preact/compat';
 import { setupRerender, act } from 'preact/test-utils';
 import { setupScratch, teardown } from '../../../test/_util/helpers';
@@ -91,7 +93,7 @@ describe('React-18-hooks', () => {
 			});
 			expect(scratch.innerHTML).to.equal('<p>hello world</p>');
 			expect(subscribe).to.be.calledOnce;
-			expect(getSnapshot).to.be.calledOnce;
+			expect(getSnapshot).to.be.calledTwice;
 		});
 
 		it('subscribes and rerenders when called', () => {
@@ -119,7 +121,7 @@ describe('React-18-hooks', () => {
 			});
 			expect(scratch.innerHTML).to.equal('<p>hello world</p>');
 			expect(subscribe).to.be.calledOnce;
-			expect(getSnapshot).to.be.calledOnce;
+			expect(getSnapshot).to.be.calledTwice;
 
 			called = true;
 			flush();
@@ -135,9 +137,11 @@ describe('React-18-hooks', () => {
 				return () => {};
 			});
 
+			const func = () => 'value: ' + i++;
+
 			let i = 0;
 			const getSnapshot = sinon.spy(() => {
-				return () => 'value: ' + i++;
+				return func;
 			});
 
 			const App = () => {
@@ -150,12 +154,39 @@ describe('React-18-hooks', () => {
 			});
 			expect(scratch.innerHTML).to.equal('<p>value: 0</p>');
 			expect(subscribe).to.be.calledOnce;
-			expect(getSnapshot).to.be.calledOnce;
+			expect(getSnapshot).to.be.calledTwice;
 
 			flush();
 			rerender();
 
-			expect(scratch.innerHTML).to.equal('<p>value: 1</p>');
+			expect(scratch.innerHTML).to.equal('<p>value: 0</p>');
+		});
+
+		it('works with useCallback', () => {
+			let toggle;
+			const App = () => {
+				const [state, setState] = useState(true);
+				toggle = setState.bind(this, () => false);
+
+				const value = useSyncExternalStore(
+					useCallback(() => {
+						return () => {};
+					}, [state]),
+					() => (state ? 'yep' : 'nope')
+				);
+
+				return <p>{value}</p>;
+			};
+
+			act(() => {
+				render(<App />, scratch);
+			});
+			expect(scratch.innerHTML).to.equal('<p>yep</p>');
+
+			toggle();
+			rerender();
+
+			expect(scratch.innerHTML).to.equal('<p>nope</p>');
 		});
 	});
 });