fix(hooks): useStateAction execution flow

Author: TheEdoRan

packages/next-safe-action/package.json

@@ -65,6 +65,7 @@
 		"@eslint/js": "^9.2.0",
 		"@types/node": "^20.12.10",
 		"@types/react": "^18.3.1",
+		"@types/react-dom": "18.3.0",
 		"@typeschema/core": "^0.13.2",
 		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
@@ -73,6 +74,7 @@
 		"next": "14.3.0-canary.42",
 		"prettier": "^3.2.5",
 		"react": "18.3.1",
+		"react-dom": "18.3.1",
 		"semantic-release": "^23.0.8",
 		"tsup": "^8.0.2",
 		"tsx": "^4.11.2",
@@ -82,6 +84,7 @@
 	"peerDependencies": {
 		"next": ">= 14.0.0",
 		"react": ">= 18.2.0",
+		"react-dom": ">= 18.2.0",
 		"zod": ">= 3.0.0"
 	},
 	"peerDependenciesMeta": {

packages/next-safe-action/src/hooks.ts

@@ -4,6 +4,7 @@ import type { InferIn, Schema } from "@typeschema/main";
 import { isNotFoundError } from "next/dist/client/components/not-found.js";
 import { isRedirectError } from "next/dist/client/components/redirect.js";
 import * as React from "react";
+import * as ReactDOM from "react-dom";
 import {} from "react/experimental";
 import type {} from "zod";
 import type {
@@ -374,15 +375,21 @@ export const useStateAction = <
 	);
 	const [isIdle, setIsIdle] = React.useState(true);
 	const [clientInput, setClientInput] = React.useState<S extends Schema ? InferIn<S> : void>();
-	const status = getActionStatus<ServerError, S, BAS, CVE, CBAVE, Data>({ isExecuting, result, isIdle });
+	const status = getActionStatus<ServerError, S, BAS, CVE, CBAVE, Data>({
+		isExecuting,
+		result: result ?? EMPTY_HOOK_RESULT,
+		isIdle,
+	});
 
 	const execute = React.useCallback(
 		(input: S extends Schema ? InferIn<S> : void) => {
-			setTimeout(() => {
+			dispatcher(input as S extends Schema ? InferIn<S> : undefined);
+
+			// eslint-disable-next-line
+			ReactDOM.flushSync(() => {
 				setIsIdle(false);
 				setClientInput(input);
-				dispatcher(input as S extends Schema ? InferIn<S> : undefined);
-			}, 0);
+			});
 		},
 		[dispatcher]
 	);