fix: ensure latest formdata to be used on form submit

packages/conform-react/context.tsx

@@ -29,6 +29,7 @@ import {
 	useSyncExternalStore,
 	useRef,
 } from 'react';
+import { flushSync } from 'react-dom';
 
 export type Pretty<T> = { [K in keyof T]: T[K] } & {};
 
@@ -484,20 +485,22 @@ export function createFormContext<
 	return {
 		...context,
 		submit(event) {
-			const submitEvent = event.nativeEvent as SubmitEvent;
-			const result = context.submit(submitEvent);
-
-			if (
-				!result.submission ||
-				result.submission.status === 'success' ||
-				result.submission.error === null
-			) {
-				if (!result.formData.has(INTENT)) {
-					onSubmit?.(event, result);
+			flushSync(() => {
+				const submitEvent = event.nativeEvent as SubmitEvent;
+				const result = context.submit(submitEvent);
+
+				if (
+					!result.submission ||
+					result.submission.status === 'success' ||
+					result.submission.error === null
+				) {
+					if (!result.formData.has(INTENT)) {
+						onSubmit?.(event, result);
+					}
+				} else {
+					event.preventDefault();
 				}
-			} else {
-				event.preventDefault();
-			}
+			});
 		},
 		onUpdate(options) {
 			onSubmit = options.onSubmit;

packages/conform-react/package.json

@@ -49,12 +49,15 @@
 		"@rollup/plugin-babel": "^5.3.1",
 		"@rollup/plugin-node-resolve": "^13.3.0",
 		"@types/react": "^18.2.43",
+		"@types/react-dom": "^18.3.0",
 		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"rollup-plugin-copy": "^3.4.0",
 		"rollup": "^2.79.1"
 	},
 	"peerDependencies": {
-		"react": ">=18"
+		"react": ">=18",
+		"react-dom": ">=18"
 	},
 	"keywords": [
 		"constraint-validation",