Use Object.is in useSyncExternalStore

compat/src/index.js

@@ -27,6 +27,7 @@ import { Children } from './Children';
 import { Suspense, lazy } from './suspense';
 import { SuspenseList } from './suspense-list';
 import { createPortal } from './portals';
+import { is } from './util';
 import {
 	hydrate,
 	render,
@@ -149,18 +150,18 @@ export function useSyncExternalStore(subscribe, getSnapshot) {
 		_instance._value = value;
 		_instance._getSnapshot = getSnapshot;
 
-		if (_instance._value !== getSnapshot()) {
+		if (!is(_instance._value, getSnapshot())) {
 			forceUpdate({ _instance });
 		}
 	}, [subscribe, value, getSnapshot]);
 
 	useEffect(() => {
-		if (_instance._value !== _instance._getSnapshot()) {
+		if (!is(_instance._value, _instance._getSnapshot())) {
 			forceUpdate({ _instance });
 		}
 
 		return subscribe(() => {
-			if (_instance._value !== _instance._getSnapshot()) {
+			if (!is(_instance._value, _instance._getSnapshot())) {
 				forceUpdate({ _instance });
 			}
 		});

compat/src/util.js

@@ -26,3 +26,13 @@ export function removeNode(node) {
 	let parentNode = node.parentNode;
 	if (parentNode) parentNode.removeChild(node);
 }
+
+/**
+ * Check if two values are the same value
+ * @param {*} x
+ * @param {*} y
+ * @returns {boolean}
+ */
+export function is(x, y) {
+	return (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y);
+}

compat/test/browser/hooks.test.js

@@ -130,6 +130,40 @@ describe('React-18-hooks', () => {
 			expect(scratch.innerHTML).to.equal('<p>hello new world</p>');
 		});
 
+		it('getSnapshot can return NaN without causing infinite loop', () => {
+			let flush;
+			const subscribe = sinon.spy(cb => {
+				flush = cb;
+				return () => {};
+			});
+			let called = false;
+			const getSnapshot = sinon.spy(() => {
+				if (called) {
+					return NaN;
+				}
+
+				return 1;
+			});
+
+			const App = () => {
+				const value = useSyncExternalStore(subscribe, getSnapshot);
+				return <p>{value}</p>;
+			};
+
+			act(() => {
+				render(<App />, scratch);
+			});
+			expect(scratch.innerHTML).to.equal('<p>1</p>');
+			expect(subscribe).to.be.calledOnce;
+			expect(getSnapshot).to.be.calledThrice;
+
+			called = true;
+			flush();
+			rerender();
+
+			expect(scratch.innerHTML).to.equal('<p>NaN</p>');
+		});
+
 		it('should not call function values on subscription', () => {
 			let flush;
 			const subscribe = sinon.spy(cb => {