feat(hooks): add onExecute callback

packages/example-app/package.json

@@ -24,5 +24,8 @@
 		"react-dom": "18.2.0",
 		"tailwindcss": "3.3.3",
 		"typescript": "5.2.2"
+	},
+	"devDependencies": {
+		"eslint-plugin-react-hooks": "^5.0.0-canary-7118f5dd7-20230705"
 	}
 }

packages/example-app/src/app/hook/deleteuser-form.tsx

@@ -24,6 +24,9 @@ const DeleteUserForm = ({ userId, deleteUser }: Props) => {
 			// You can reset result object by calling `reset`.
 			// reset();
 		},
+		onExecute(input) {
+			console.log("HELLO FROM ONEXECUTE", input);
+		},
 	});
 
 	console.log("status:", status);

packages/example-app/src/app/optimistic-hook/addlikes-form.tsx

@@ -27,6 +27,9 @@ const AddLikesForm = ({ likesCount, addLikes }: Props) => {
 					// You can reset result object by calling `reset`.
 					// reset();
 				},
+				onExecute(input) {
+					console.log("HELLO FROM ONEXECUTE", input);
+				},
 			}
 		);
 

packages/next-safe-action/.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
 		ecmaVersion: "latest",
 		sourceType: "module",
 	},
-	plugins: ["@typescript-eslint"],
+	plugins: ["@typescript-eslint", "react-hooks"],
 	extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
 	rules: {
 		"@typescript-eslint/consistent-type-imports": "error",
@@ -18,5 +18,6 @@ module.exports = {
 		"@typescript-eslint/ban-ts-comment": "off",
 		"@typescript-eslint/ban-types": "off",
 		"no-mixed-spaces-and-tabs": "off",
+		"react-hooks/exhaustive-deps": "warn",
 	},
 };

packages/next-safe-action/README.md

@@ -188,7 +188,7 @@ type Props = {
 };
 
 export default function Login({ loginUser }: Props) {
-  // Safe action (`loginUser`) and optional `onSuccess` and `onError` callbacks
+  // Safe action (`loginUser`) and optional `onSuccess`, `onError` and `onExecute` callbacks
   // passed to `useAction` hook.
   const {
     execute,
@@ -216,6 +216,10 @@ export default function Login({ loginUser }: Props) {
         // Data used to call `execute`.
         const { username, password } = input;
       },
+      onExecute: (input) => {
+        // Action input.
+        const { username, password } = input;
+      },
     }
   );
 
@@ -242,9 +246,9 @@ export default function Login({ loginUser }: Props) {
 }
 ```
 
-The `useAction` has one required argument (the action) and one optional argument (an object with `onSuccess` and `onError` callbacks).
+The `useAction` has one required argument (the action) and one optional argument (an object with `onExecute`, `onSuccess`, and `onError` callbacks).
 
-`onSuccess(data, input, reset)` and `onError(error, input, reset)` are executed, respectively, when the action executes successfully or fails. The original payload of the action is available as the second argument of the callback (`input`): this is the same data that was passed to the `execute` function. You can also reset the result object inside these callbacks with `reset()` (third argument of the callback). 
+`onExecute(input)`, `onSuccess(data, input, reset)` and `onError(error, input, reset)` are executed, respectively, when the action is executing, when the execution is successful, or when it fails. The original payload of the action is available as the second argument of the callback (`input`): this is the same data that was passed to the `execute` function. You can also reset the result object inside these callbacks with `reset()` (third argument of the callback). 
 
 It returns an object with four keys:
 
@@ -324,6 +328,7 @@ export default function AddLikes({ likesCount, addLikes }: Props) {
     {
       onSuccess: (data, input, reset) => {},
       onError: (error, input, reset) => {},
+      onExecute: (input) => {},
     }
   );
 

packages/next-safe-action/README_v2.md

@@ -2,7 +2,7 @@
 
 > `next-safe-action` is a library that takes full advantage of the latest and greatest Next.js, React and TypeScript features, using Zod, to let you define typesafe actions on the server and call them from Client Components. 
 
-This is the old documentation, for version 2 of the library. If you want to check out the new documentation, [you can find it here](README.md).
+This is the documentation for version 2 of the library. If you want to check out the the 3.x.x documentation, [you can find it here](README_v3.md). If you want to check out documentation for version 4.x.x, [you can find it here](README.md).
 
 ## Features
 - ✅ Pretty simple