refactor(hooks): don't use ref for safeAction input

TheEdoRan · Nov 23, 2023 · 83b7cf8 · 83b7cf8
1 parent 5c19f01
commit 83b7cf8
Showing 1 changed file with 47 additions and 46 deletions.
diff --git a/packages/next-safe-action/src/hook.ts b/packages/next-safe-action/src/hook.ts
@@ -1,9 +1,9 @@
 "use client";
 
 import {
-	experimental_useOptimistic,
 	useCallback,
 	useEffect,
+	experimental_useOptimistic as useOptimistic,
 	useRef,
 	useState,
 	useTransition,
@@ -53,7 +53,7 @@ const useActionCallbacks = <const Schema extends z.ZodTypeAny, const Data>(
 	const onErrorRef = useRef(cb?.onError);
 	const onSettledRef = useRef(cb?.onSettled);
 
-	// Execute the callback on success or error, if provided.
+	// Execute the callback when the action status changes.
 	useEffect(() => {
 		const onExecute = onExecuteRef.current;
 		const onSuccess = onSuccessRef.current;
@@ -83,7 +83,7 @@ const useActionCallbacks = <const Schema extends z.ZodTypeAny, const Data>(
 /**
  * Use the action from a Client Component via hook.
  * @param safeAction The typesafe action.
- * @param callbacks Optional callbacks executed when the action succeeds or fails.
+ * @param callbacks Optional callbacks executed based on the action status.
  *
  * {@link https://next-safe-action.dev/docs/usage-from-client/hooks/useaction See an example}
  */
@@ -92,33 +92,34 @@ export const useAction = <const Schema extends z.ZodTypeAny, const Data>(
 	callbacks?: HookCallbacks<Schema, Data>
 ) => {
 	const [, startTransition] = useTransition();
-	const executor = useRef(safeAction);
 	const [result, setResult] = useState<HookResult<Schema, Data>>(DEFAULT_RESULT);
 	const [input, setInput] = useState<z.input<Schema>>();
 	const [isExecuting, setIsExecuting] = useState(false);
 
 	const status = getActionStatus<Schema, Data>(isExecuting, result);
 
-	const execute = useCallback((input: z.input<Schema>) => {
-		setIsExecuting(true);
-		setInput(input);
-
-		return startTransition(() => {
-			return executor
-				.current(input)
-				.then((res) => setResult(res ?? DEFAULT_RESULT))
-				.catch((e) => {
-					if (isNextRedirectError(e) || isNextNotFoundError(e)) {
-						throw e;
-					}
-
-					setResult({ fetchError: isError(e) ? e.message : "Something went wrong" });
-				})
-				.finally(() => {
-					setIsExecuting(false);
-				});
-		});
-	}, []);
+	const execute = useCallback(
+		(input: z.input<Schema>) => {
+			setInput(input);
+			setIsExecuting(true);
+
+			return startTransition(() => {
+				return safeAction(input)
+					.then((res) => setResult(res ?? DEFAULT_RESULT))
+					.catch((e) => {
+						if (isNextRedirectError(e) || isNextNotFoundError(e)) {
+							throw e;
+						}
+
+						setResult({ fetchError: isError(e) ? e.message : "Something went wrong" });
+					})
+					.finally(() => {
+						setIsExecuting(false);
+					});
+			});
+		},
+		[safeAction]
+	);
 
 	const reset = useCallback(() => {
 		setResult(DEFAULT_RESULT);
@@ -140,7 +141,8 @@ export const useAction = <const Schema extends z.ZodTypeAny, const Data>(
  * **NOTE: This hook uses an experimental React feature.**
  * @param safeAction The typesafe action.
  * @param initialOptimisticData Initial optimistic data.
- * @param callbacks Optional callbacks executed when the action succeeds or fails.
+ * @param reducer Optimistic state reducer.
+ * @param callbacks Optional callbacks executed based on the action status.
  *
  * {@link https://next-safe-action.dev/docs/usage-from-client/hooks/useoptimisticaction See an example}
  */
@@ -150,41 +152,40 @@ export const useOptimisticAction = <const Schema extends z.ZodTypeAny, const Dat
 	reducer: (state: Data, input: z.input<Schema>) => Data,
 	callbacks?: HookCallbacks<Schema, Data>
 ) => {
+	const [, startTransition] = useTransition();
 	const [result, setResult] = useState<HookResult<Schema, Data>>(DEFAULT_RESULT);
 	const [input, setInput] = useState<z.input<Schema>>();
+	const [isExecuting, setIsExecuting] = useState(false);
 
-	const [optimisticData, setOptimisticState] = experimental_useOptimistic<Data, z.input<Schema>>(
+	const [optimisticData, setOptimisticState] = useOptimistic<Data, z.input<Schema>>(
 		initialOptimisticData,
 		reducer
 	);
 
-	const [isExecuting, setIsExecuting] = useState(false);
-
-	const executor = useRef(safeAction);
-
 	const status = getActionStatus<Schema, Data>(isExecuting, result);
 
 	const execute = useCallback(
 		(input: z.input<Schema>) => {
-			setIsExecuting(true);
-			setOptimisticState(input);
 			setInput(input);
+			setIsExecuting(true);
 
-			return executor
-				.current(input)
-				.then((res) => setResult(res ?? DEFAULT_RESULT))
-				.catch((e) => {
-					if (isNextRedirectError(e) || isNextNotFoundError(e)) {
-						throw e;
-					}
-
-					setResult({ fetchError: isError(e) ? e.message : "Something went wrong" });
-				})
-				.finally(() => {
-					setIsExecuting(false);
-				});
+			return startTransition(() => {
+				setOptimisticState(input);
+				return safeAction(input)
+					.then((res) => setResult(res ?? DEFAULT_RESULT))
+					.catch((e) => {
+						if (isNextRedirectError(e) || isNextNotFoundError(e)) {
+							throw e;
+						}
+
+						setResult({ fetchError: isError(e) ? e.message : "Something went wrong" });
+					})
+					.finally(() => {
+						setIsExecuting(false);
+					});
+			});
 		},
-		[setOptimisticState]
+		[setOptimisticState, safeAction]
 	);
 
 	const reset = useCallback(() => {