perf(hooks): use setTimeout instead of flushSync to update state

TheEdoRan · Jul 22, 2024 · 8207452 · 8207452
1 parent a71e64b
commit 8207452
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 31 deletions.
diff --git a/packages/next-safe-action/src/hooks.ts b/packages/next-safe-action/src/hooks.ts
@@ -3,7 +3,6 @@
 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 { InferIn, Schema } from "./adapters/types";
@@ -41,6 +40,12 @@ export const useAction = <
 
 	const execute = React.useCallback(
 		(input: S extends Schema ? InferIn<S> : void) => {
+			setTimeout(() => {
+				setIsIdle(false);
+				setClientInput(input);
+				setIsExecuting(true);
+			}, 0);
+
 			startTransition(() => {
 				safeActionFn(input as S extends Schema ? InferIn<S> : undefined)
 					.then((res) => setResult(res ?? {}))
@@ -55,19 +60,19 @@ export const useAction = <
 						setIsExecuting(false);
 					});
 			});
-
-			ReactDOM.flushSync(() => {
-				setIsIdle(false);
-				setClientInput(input);
-				setIsExecuting(true);
-			});
 		},
 		[safeActionFn]
 	);
 
 	const executeAsync = React.useCallback(
 		(input: S extends Schema ? InferIn<S> : void) => {
 			const fn = new Promise<Awaited<ReturnType<typeof safeActionFn>>>((resolve, reject) => {
+				setTimeout(() => {
+					setIsIdle(false);
+					setClientInput(input);
+					setIsExecuting(true);
+				}, 0);
+
 				startTransition(() => {
 					safeActionFn(input as S extends Schema ? InferIn<S> : undefined)
 						.then((res) => {
@@ -88,12 +93,6 @@ export const useAction = <
 				});
 			});
 
-			ReactDOM.flushSync(() => {
-				setIsIdle(false);
-				setClientInput(input);
-				setIsExecuting(true);
-			});
-
 			return fn;
 		},
 		[safeActionFn]
@@ -165,6 +164,12 @@ export const useOptimisticAction = <
 
 	const execute = React.useCallback(
 		(input: S extends Schema ? InferIn<S> : void) => {
+			setTimeout(() => {
+				setIsIdle(false);
+				setClientInput(input);
+				setIsExecuting(true);
+			}, 0);
+
 			startTransition(() => {
 				setOptimisticValue(input as S extends Schema ? InferIn<S> : undefined);
 				safeActionFn(input as S extends Schema ? InferIn<S> : undefined)
@@ -180,19 +185,19 @@ export const useOptimisticAction = <
 						setIsExecuting(false);
 					});
 			});
-
-			ReactDOM.flushSync(() => {
-				setIsIdle(false);
-				setClientInput(input);
-				setIsExecuting(true);
-			});
 		},
 		[safeActionFn, setOptimisticValue]
 	);
 
 	const executeAsync = React.useCallback(
 		(input: S extends Schema ? InferIn<S> : void) => {
 			const fn = new Promise<Awaited<ReturnType<typeof safeActionFn>>>((resolve, reject) => {
+				setTimeout(() => {
+					setIsIdle(false);
+					setClientInput(input);
+					setIsExecuting(true);
+				}, 0);
+
 				startTransition(() => {
 					setOptimisticValue(input as S extends Schema ? InferIn<S> : undefined);
 					safeActionFn(input as S extends Schema ? InferIn<S> : undefined)
@@ -214,12 +219,6 @@ export const useOptimisticAction = <
 				});
 			});
 
-			ReactDOM.flushSync(() => {
-				setIsIdle(false);
-				setClientInput(input);
-				setIsExecuting(true);
-			});
-
 			return fn;
 		},
 		[safeActionFn, setOptimisticValue]

diff --git a/packages/next-safe-action/src/stateful-hooks.ts b/packages/next-safe-action/src/stateful-hooks.ts
@@ -1,7 +1,6 @@
 "use client";
 
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import {} from "react/experimental";
 import type {} from "zod";
 import type { InferIn, Schema } from "./adapters/types";
@@ -45,13 +44,13 @@ export const useStateAction = <
 
 	const execute = React.useCallback(
 		(input: S extends Schema ? InferIn<S> : void) => {
-			startTransition(() => {
-				dispatcher(input as S extends Schema ? InferIn<S> : undefined);
-			});
-
-			ReactDOM.flushSync(() => {
+			setTimeout(() => {
 				setIsIdle(false);
 				setClientInput(input);
+			}, 0);
+
+			startTransition(() => {
+				dispatcher(input as S extends Schema ? InferIn<S> : undefined);
 			});
 		},
 		[dispatcher]