use sync external store requires stable getSnapshot results

preactjs · Aug 8, 2022 · b1d3ac3 · b1d3ac3
1 parent cb50040
commit b1d3ac3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/compat/src/index.js b/compat/src/index.js
@@ -140,7 +140,7 @@ export function useSyncExternalStore(subscribe, getSnapshot) {
 
 	useLayoutEffect(() => {
 		if (value !== state) {
-			setState(value);
+			setState(() => value);
 		}
 	}, [subscribe, value, getSnapshot]);
 

diff --git a/compat/test/browser/hooks.test.js b/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.calledOnce;
+			expect(getSnapshot).to.be.calledTwice;
 		});
 
 		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.calledOnce;
+			expect(getSnapshot).to.be.calledTwice;
 
 			called = true;
 			flush();
@@ -137,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 = () => {
@@ -152,12 +154,12 @@ 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', () => {