Batch updates in flushSync

Previously, flushSync temporarily configured options.debounceRendering
to execute every scheduled render immediately. This made updates
synchronous, but it also caused each state setter to render
independently instead of batching all updates performed inside the
callback into one synchronous commit.

Capture the scheduled render callback while the user callback runs, then
flush it once before returning. The previous debounce function is
restored in a finally block.

Mirrors #5173 (v10.x).

Author: JoviDeCroock

compat/src/index.js

@@ -132,10 +132,21 @@ function findDOMNode(component) {
  */
 const flushSync = (callback, arg) => {
 	const prevDebounce = options.debounceRendering;
-	options.debounceRendering = cb => cb();
-	const res = callback(arg);
-	options.debounceRendering = prevDebounce;
-	return res;
+
+	// Capture the scheduled render callback so that all updates performed
+	// inside the user callback are batched into a single synchronous commit
+	// instead of every state setter rendering independently.
+	let flush;
+	options.debounceRendering = cb => {
+		flush = cb;
+	};
+	try {
+		const res = callback(arg);
+		if (flush) flush();
+		return res;
+	} finally {
+		options.debounceRendering = prevDebounce;
+	}
 };
 
 /**

compat/test/browser/unstable_batchedUpdates.test.jsx

@@ -0,0 +1,58 @@
+import { createElement, render } from 'preact';
+import { useState } from 'preact/hooks';
+import { unstable_batchedUpdates, flushSync } from 'preact/compat';
+import { vi } from 'vitest';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
+
+describe('unstable_batchedUpdates', () => {
+	it('should execute & return cb', () => {
+		expect(unstable_batchedUpdates(() => false)).to.equal(false);
+		expect(unstable_batchedUpdates(arg => arg, true)).to.equal(true);
+	});
+});
+
+describe('flushSync', () => {
+	/** @type {HTMLDivElement} */
+	let scratch;
+
+	beforeEach(() => {
+		scratch = setupScratch();
+	});
+
+	afterEach(() => {
+		teardown(scratch);
+	});
+
+	it('should invoke the given callback', () => {
+		const returnValue = {};
+		const spy = vi.fn(() => returnValue);
+		const result = flushSync(spy);
+
+		expect(spy).toHaveBeenCalledOnce();
+		expect(result).to.equal(returnValue);
+	});
+
+	it('should batch updates and flush them synchronously', () => {
+		let setA;
+		let setB;
+		const renders = vi.fn();
+
+		function App() {
+			const [a, updateA] = useState(0);
+			const [b, updateB] = useState(0);
+			setA = updateA;
+			setB = updateB;
+			renders();
+			return <p>{a + b}</p>;
+		}
+
+		render(<App />, scratch);
+		flushSync(() => {
+			setA(1);
+			setB(1);
+		});
+
+		expect(scratch.textContent).to.equal('2');
+		expect(renders).toHaveBeenCalledTimes(2);
+	});
+});