Implement flushSync (#5036)

Author: JoviDeCroock

compat/src/index.js

@@ -5,7 +5,8 @@ import {
 	createRef,
 	Component,
 	createContext,
-	Fragment
+	Fragment,
+	options
 } from 'preact';
 import {
 	useState,
@@ -131,15 +132,20 @@ function findDOMNode(component) {
 const unstable_batchedUpdates = (callback, arg) => callback(arg);
 
 /**
- * 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;
+};
 
 // compat to react-is
 export const isElement = isValidElement;

compat/test/browser/useSyncExternalStore.test.js

@@ -379,11 +379,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]);
@@ -686,10 +684,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]);