backport #3663

compat/src/index.js

@@ -137,24 +137,39 @@ export function useTransition() {
 // styles/... before it attaches
 export const useInsertionEffect = useLayoutEffect;
 
+/**
+ * This is taken from https://github.com/facebook/react/blob/main/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L84
+ * on a high level this cuts out the warnings, ... and attempts a smaller implementation
+ */
 export function useSyncExternalStore(subscribe, getSnapshot) {
-	const [state, setState] = useState(getSnapshot);
-
 	const value = getSnapshot();
 
+	const [{ _instance }, forceUpdate] = useState({
+		_instance: { _value: value, _getSnapshot: getSnapshot }
+	});
+
 	useLayoutEffect(() => {
-		if (value !== state) {
-			setState(() => value);
+		_instance._value = value;
+		_instance._getSnapshot = getSnapshot;
+
+		if (_instance._value !== getSnapshot()) {
+			forceUpdate({ _instance });
 		}
 	}, [subscribe, value, getSnapshot]);
 
 	useEffect(() => {
+		if (_instance._value !== _instance._getSnapshot()) {
+			forceUpdate({ _instance });
+		}
+
 		return subscribe(() => {
-			setState(() => getSnapshot());
+			if (_instance._value !== _instance._getSnapshot()) {
+				forceUpdate({ _instance });
+			}
 		});
-	}, [subscribe, getSnapshot]);
+	}, [subscribe]);
 
-	return state;
+	return value;
 }
 
 export * from 'preact/hooks';

compat/test/browser/hooks.test.js

@@ -93,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.calledTwice;
+			expect(getSnapshot).to.be.calledThrice;
 		});
 
 		it('subscribes and rerenders when called', () => {
@@ -121,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.calledTwice;
+			expect(getSnapshot).to.be.calledThrice;
 
 			called = true;
 			flush();
@@ -154,14 +154,42 @@ describe('React-18-hooks', () => {
 			});
 			expect(scratch.innerHTML).to.equal('<p>value: 0</p>');
 			expect(subscribe).to.be.calledOnce;
-			expect(getSnapshot).to.be.calledTwice;
+			expect(getSnapshot).to.be.calledThrice;
 
 			flush();
 			rerender();
 
 			expect(scratch.innerHTML).to.equal('<p>value: 0</p>');
 		});
 
+		it('should work with changing getSnapshot', () => {
+			let flush;
+			const subscribe = sinon.spy(cb => {
+				flush = cb;
+				return () => {};
+			});
+
+			let i = 0;
+			const App = () => {
+				const value = useSyncExternalStore(subscribe, () => {
+					return i;
+				});
+				return <p>value: {value}</p>;
+			};
+
+			act(() => {
+				render(<App />, scratch);
+			});
+			expect(scratch.innerHTML).to.equal('<p>value: 0</p>');
+			expect(subscribe).to.be.calledOnce;
+
+			i++;
+			flush();
+			rerender();
+
+			expect(scratch.innerHTML).to.equal('<p>value: 1</p>');
+		});
+
 		it('works with useCallback', () => {
 			let toggle;
 			const App = () => {