refactor(hooks): removal of isPending shorthand status property

TheEdoRan · TheEdoRan · commit 89d0e7031e49 · 2025-05-15T11:08:23.000+02:00
diff --git a/apps/playground/src/app/(examples)/hook/page.tsx b/apps/playground/src/app/(examples)/hook/page.tsx
@@ -18,7 +18,6 @@ export default function Hook() {
 		isIdle,
 		isExecuting,
 		isTransitioning,
-		isPending,
 		hasSucceeded,
 		hasErrored,
 	} = useAction(deleteUser, {
@@ -44,7 +43,6 @@ export default function Hook() {
 		isIdle,
 		isExecuting,
 		isTransitioning,
-		isPending,
 		hasSucceeded,
 		hasErrored,
 	});
@@ -53,7 +51,7 @@ export default function Hook() {
 		<main className="w-96 max-w-full px-4">
 			<StyledHeading>Action using hook</StyledHeading>
 			<form
-				className="flex flex-col mt-8 space-y-4"
+				className="mt-8 flex flex-col space-y-4"
 				onSubmit={async (e) => {
 					e.preventDefault();
 					const formData = new FormData(e.currentTarget);
diff --git a/apps/playground/src/app/(examples)/navigation/page.tsx b/apps/playground/src/app/(examples)/navigation/page.tsx
@@ -17,7 +17,6 @@ export default function Navigation() {
 		isIdle,
 		isExecuting,
 		isTransitioning,
-		isPending,
 		hasSucceeded,
 		hasErrored,
 	} = useAction(testNavigate, {
@@ -44,7 +43,6 @@ export default function Navigation() {
 		isIdle,
 		isExecuting,
 		isTransitioning,
-		isPending,
 		hasSucceeded,
 		hasErrored,
 	});
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
 		"is-ci": "^4.1.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"turbo": "^2.5.0",
+		"turbo": "^2.5.2",
 		"typescript": "catalog:"
 	},
 	"packageManager": "pnpm@10.10.0"
diff --git a/packages/next-safe-action/src/hooks-utils.ts b/packages/next-safe-action/src/hooks-utils.ts
@@ -8,19 +8,21 @@ import type { InferInputOrDefault, StandardSchemaV1 } from "./standard-schema";
 export const getActionStatus = <ServerError, S extends StandardSchemaV1 | undefined, CVE, Data>({
 	isIdle,
 	isExecuting,
+	isTransitioning,
 	result,
 	hasNavigated,
 	hasThrownError,
 }: {
 	isIdle: boolean;
 	isExecuting: boolean;
+	isTransitioning: boolean;
 	hasNavigated: boolean;
 	hasThrownError: boolean;
 	result: SafeActionResult<ServerError, S, CVE, Data>;
 }): HookActionStatus => {
 	if (isIdle) {
 		return "idle";
-	} else if (isExecuting) {
+	} else if (isExecuting || isTransitioning) {
 		return "executing";
 	} else if (
 		hasThrownError ||
@@ -46,7 +48,6 @@ export const getActionShorthandStatusObject = ({
 		isIdle: status === "idle",
 		isExecuting: status === "executing",
 		isTransitioning,
-		isPending: status === "executing" || isTransitioning,
 		hasSucceeded: status === "hasSucceeded",
 		hasErrored: status === "hasErrored",
 		hasNavigated: status === "hasNavigated",
diff --git a/packages/next-safe-action/src/hooks.ts b/packages/next-safe-action/src/hooks.ts
@@ -36,6 +36,7 @@ export const useAction = <ServerError, S extends StandardSchemaV1 | undefined, C
 
 	const status = getActionStatus<ServerError, S, CVE, Data>({
 		isExecuting,
+		isTransitioning,
 		result,
 		isIdle,
 		hasNavigated: navigationError !== null,
@@ -169,6 +170,7 @@ export const useOptimisticAction = <ServerError, S extends StandardSchemaV1 | un
 
 	const status = getActionStatus<ServerError, S, CVE, Data>({
 		isExecuting,
+		isTransitioning,
 		result,
 		isIdle,
 		hasNavigated: navigationError !== null,
diff --git a/packages/next-safe-action/src/hooks.types.ts b/packages/next-safe-action/src/hooks.types.ts
@@ -51,7 +51,6 @@ export type HookShorthandStatus = {
 	isIdle: boolean;
 	isExecuting: boolean;
 	isTransitioning: boolean;
-	isPending: boolean;
 	hasSucceeded: boolean;
 	hasErrored: boolean;
 	hasNavigated: boolean;
diff --git a/packages/next-safe-action/src/stateful-hooks.ts b/packages/next-safe-action/src/stateful-hooks.ts
@@ -31,6 +31,7 @@ export const useStateAction = <ServerError, S extends StandardSchemaV1 | undefin
 	const [clientInput, setClientInput] = React.useState<InferInputOrDefault<S, void>>();
 	const status = getActionStatus<ServerError, S, CVE, Data>({
 		isExecuting,
+		isTransitioning,
 		result: result ?? {},
 		isIdle,
 		// HACK: This is a workaround to avoid the status being "hasNavigated" when the action is executed.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/docs/execute-actions/hooks/useaction.md b/website/docs/execute-actions/hooks/useaction.md
@@ -77,11 +77,10 @@ As you can see, here we display a greet message after the action is performed, i
 - `isIdle`: true if the action status is `idle`.
 - `isTransitioning`: true if the transition status  from the `useTransition` hook used under the hood is `true`.
 - `isExecuting`: true if the action status is `executing`.
-- `isPending`: true if the action status is `executing` or `isTransitioning`.
 - `hasSucceeded`: true if the action status is `hasSucceeded`.
 - `hasErrored`: true if the action status is `hasErrored`.
 - `hasNavigated`: true if a `next/navigation` function was called inside the action.
 
-For checking the action status, the recommended way is to use the `isPending` shorthand property. Using `isExecuting` or checking if `status` is `"executing"` could cause race conditions when using navigation functions, such as `redirect`.
+The `executing` status and `isExecuting` shorthand property include the transition state.
 
 Explore a working example [here](<https://github.com/TheEdoRan/next-safe-action/tree/main/apps/playground/src/app/(examples)/hook>).
diff --git a/website/docs/execute-actions/hooks/useoptimisticaction.md b/website/docs/execute-actions/hooks/useoptimisticaction.md
@@ -131,11 +131,10 @@ export default function TodosBox({ todos }: Props) {
 - `isIdle`: true if the action status is `idle`.
 - `isTransitioning`: true if the transition status  from the `useTransition` hook used under the hood is `true`.
 - `isExecuting`: true if the action status is `executing`.
-- `isPending`: true if the action status is `executing` or `isTransitioning`.
 - `hasSucceeded`: true if the action status is `hasSucceeded`.
 - `hasErrored`: true if the action status is `hasErrored`.
 - `hasNavigated`: true if a `next/navigation` function was called inside the action.
 
-For checking the action status, the recommended way is to use the `isPending` shorthand property. Using `isExecuting` or checking if `status` is `"executing"` could cause race conditions when using navigation functions, such as `redirect`.
+The `executing` status and `isExecuting` shorthand property include the transition state.
 
 Explore a working example [here](<https://github.com/TheEdoRan/next-safe-action/tree/main/apps/playground/src/app/(examples)/optimistic-hook>).
diff --git a/website/docs/migrations/v7-to-v8.md b/website/docs/migrations/v7-to-v8.md
@@ -92,6 +92,10 @@ const result = await boundAction(input);
 
 The deprecated `executeOnMount` hook functionality has been removed in v8. Server Actions should be used only for mutations, so it doesn't make sense to execute them on mount. Or at least, it shouldn't be a common case and, above all, a library job. If you still need to do it, just use `useEffect()` to trigger the execution, however you want.
 
+### ⚠️ Removal of `isPending` shorthand status property
+
+The `isPending` shorthand status property has been removed from hooks return objects in v8. Having both `isExecuting` and `isPending` properties was a bit confusing, so now both the `isExecuting` property and `"executing"` status value include the transition state of the action execution.
+
 ### ✨ Type-checked metadata
 
 This is a big improvement in type safety over v7. Metadata is now statically type-checked when passed to actions. So, now if you forget to pass the expected metadata shape, as defined by the `defineMetadataSchema` init option, you will get a type error immediately:
