Implement flushSync (#5036)

(cherry picked from commit 978c0b9)

Author: JoviDeCroock

compat/src/index.js

@@ -4,6 +4,7 @@ import {
 	createContext,
 	createElement,
 	createRef,
+	options,
 	cloneElement as preactCloneElement,
 	render as preactRender
 } from 'preact';
@@ -121,15 +122,20 @@ function findDOMNode(component) {
 }
 
 /**
- * In React, `flushSync` flushes the entire tree and forces a rerender. It's
- * implmented here as a no-op.
+ * In React, `flushSync` flushes the entire tree and forces a rerender.
  * @template Arg
  * @template Result
  * @param {(arg: Arg) => Result} callback function that runs before the flush
  * @param {Arg} [arg] Optional argument that can be passed to the callback
  * @returns
  */
-const flushSync = (callback, arg) => callback(arg);
+const flushSync = (callback, arg) => {
+	const prevDebounce = options.debounceRendering;
+	options.debounceRendering = cb => cb();
+	const res = callback(arg);
+	options.debounceRendering = prevDebounce;
+	return res;
+};
 
 /**
  * In React, `unstable_batchedUpdates` is a legacy feature that was made a no-op

compat/test/browser/useSyncExternalStore.test.jsx

@@ -380,11 +380,9 @@ describe('useSyncExternalStore', () => {
 
 			// Switch stores and update in the same batch
 			await act(() => {
-				ReactDOM.flushSync(() => {
-					// This update will be disregarded
-					storeA.set(2);
-					setStore(storeB);
-				});
+				// This update will be disregarded
+				storeA.set(2);
+				setStore(storeB);
 			});
 			// Now reading from B instead of A
 			assertLog([0]);
@@ -687,10 +685,8 @@ describe('useSyncExternalStore', () => {
 
 			// Update the store and getSnapshot at the same time
 			await act(() => {
-				ReactDOM.flushSync(() => {
-					setGetSnapshot(() => getSnapshotB);
-					store.set({ a: 1, b: 2 });
-				});
+				setGetSnapshot(() => getSnapshotB);
+				store.set({ a: 1, b: 2 });
 			});
 			// It should read from B instead of A
 			assertLog([2]);