Hello folks! My name is Suresh K. Solanki. I’m your friend who’s always here to help you find solutions whenever you’re in trouble. Today, while working on a frontend project in ReactJS, I realized that in React version 19, we used to handle each input with a separate useState and side effects with separate useEffect hooks.
But in this article, I’m going to show you something very important. In ReactJS version 19, a new hook called useActionState has been introduced. This hook is designed to handle complex forms or forms with multiple inputs. It helps manage the form without using multiple useState hooks and also takes care of form rendering and data changes, like true/false values and more.
What is useActionState Hook in reactjs ?
Basically, in simple terms, if we understand this hook, useActionState works with actions in a form and returns a wrapper for those actions. You can easily use it to get data from inputs with a single hook and manage everything smoothly.
useActionState returns data, action, status, and more. Before this hook, we had to use separate action states to manage data, promises, validations (like true/false for pass/fail), and track errors separately. Now, this hook combines all of that in a much simpler way.
useActionState hook’s syntax
If we talk about the syntax of the useActionState hook, we can understand that, as we discussed earlier, this hook usually contains a function that wraps the entire condition, data, and variations like true/false.
Now, you should know the exact syntax of the useActionState hook, which is given below:
import { useActionState } from “@shopify/hydrogen”;
export default function MyForm() {
// Step 1: action state hook
const { data, action, status, error } = useActionState(myAction);
// Step 2: form submit handler
const handleSubmit = async (event) => {
event.preventDefault(); // page reload na ho
await action({
name: data.name || “”,
email: data.email || “”,
});
};
return (
<form onSubmit={handleSubmit} style={{ maxWidth: “400px”, margin: “auto” }}>
<h2>Simple Form</h2>
{/* Name input */}
<input
name=”name”
value={data.name || “”}
onChange={data.handleChange}
placeholder=”Enter your name”
style={{ display: “block”, margin: “10px 0”, width: “100%” }}
/>
{/* Email input */}
<input
name=”email”
value={data.email || “”}
onChange={data.handleChange}
placeholder=”Enter your email”
style={{ display: “block”, margin: “10px 0”, width: “100%” }}
/>
{/* Submit button */}
<button type=”submit” disabled={status === “pending”}>
{status === “pending” ? “Submitting…” : “Submit”}
</button>
{/* Error message */}
{status === “error” && <p style={{ color: “red” }}>{error}</p>}
{/* Success message */}
{status === “success” && <p style={{ color: “green” }}>Form submitted!</p>}
</form>
);
}
// Step 3: action function
async function myAction(values) {
console.log(“Form data submitted:”, values);
// yahan pe API call ya server request kar sakte ho
// Example: fake delay
await new Promise((resolve) => setTimeout(resolve, 1000));
// Success message
return { message: “Success!” };
}
As you can see in this handleSubmit function, it gets triggered as soon as the user submits the form. Inside this function, there is a const { data, action, status, error } = useActionState(myAction).
Here’s what this useActionState hook is doing:
- data → Keeps track of the current values of the form, like what the user typed in the name and email fields.
- action → This is the function that actually submits the form data to the server or backend.
- status → Shows the current state of the form: “idle”, “pending”, “success”, or “error”.
- error → Stores any error message if something goes wrong while submitting.
So basically, useActionState hook manages form data, handles the action, and tracks status/error, so we can easily show success or error messages after form submission.
And the handleSubmit function itself:
- event.preventDefault() → Stops the page from reloading.
- await action({…}) → Submits the form data.
- Based on status and error → Shows success or error messages to the user.
useActionState is basically used to manage or handle forms with data that is being passed from the form to the state. useActionState processes this data and can submit it if required, either to an API or to display it somewhere else.
You can also check the status, like whether the form is submitting, using the status keyword provided by useActionState in the const. You can change the keyword or variable name in the const or function name, but the syntax should remain the same.
On my YouTube channel, I’m going to show you the easiest way to use this hook, so make sure to check it out!
Final Words
Well, I’ve tried to explain this in the easiest way possible, but if you still don’t understand, you can check out my YouTube channel, where I discuss this in depth along with full form handling.
