diff --git a/packages/next-safe-action/src/hooks.ts b/packages/next-safe-action/src/hooks.ts index 0f23184b..e418a798 100644 --- 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 : void) => { + setTimeout(() => { + setIsIdle(false); + setClientInput(input); + setIsExecuting(true); + }, 0); + startTransition(() => { safeActionFn(input as S extends Schema ? InferIn : undefined) .then((res) => setResult(res ?? {})) @@ -55,12 +60,6 @@ export const useAction = < setIsExecuting(false); }); }); - - ReactDOM.flushSync(() => { - setIsIdle(false); - setClientInput(input); - setIsExecuting(true); - }); }, [safeActionFn] ); @@ -68,6 +67,12 @@ export const useAction = < const executeAsync = React.useCallback( (input: S extends Schema ? InferIn : void) => { const fn = new Promise>>((resolve, reject) => { + setTimeout(() => { + setIsIdle(false); + setClientInput(input); + setIsExecuting(true); + }, 0); + startTransition(() => { safeActionFn(input as S extends Schema ? InferIn : 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 : void) => { + setTimeout(() => { + setIsIdle(false); + setClientInput(input); + setIsExecuting(true); + }, 0); + startTransition(() => { setOptimisticValue(input as S extends Schema ? InferIn : undefined); safeActionFn(input as S extends Schema ? InferIn : undefined) @@ -180,12 +185,6 @@ export const useOptimisticAction = < setIsExecuting(false); }); }); - - ReactDOM.flushSync(() => { - setIsIdle(false); - setClientInput(input); - setIsExecuting(true); - }); }, [safeActionFn, setOptimisticValue] ); @@ -193,6 +192,12 @@ export const useOptimisticAction = < const executeAsync = React.useCallback( (input: S extends Schema ? InferIn : void) => { const fn = new Promise>>((resolve, reject) => { + setTimeout(() => { + setIsIdle(false); + setClientInput(input); + setIsExecuting(true); + }, 0); + startTransition(() => { setOptimisticValue(input as S extends Schema ? InferIn : undefined); safeActionFn(input as S extends Schema ? InferIn : 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 index 77ad0b44..524838d9 100644 --- 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 : void) => { - startTransition(() => { - dispatcher(input as S extends Schema ? InferIn : undefined); - }); - - ReactDOM.flushSync(() => { + setTimeout(() => { setIsIdle(false); setClientInput(input); + }, 0); + + startTransition(() => { + dispatcher(input as S extends Schema ? InferIn : undefined); }); }, [dispatcher]