The useActionState hook is a new feature introduced in React 19, designed to simplify state management based on form actions. It offers a powerful way to handle asynchronous form submissions and automatically manage the state and loading states associated with these actions. In this post, we’ll dive into the useActionState hook and explore how it works with a practical example.
Practical example on usage of useActionState
Before getting started, please ensure that React 19 is installed.
To illustrate how the useActionStatehook works, let’s implement a basic counter application for simplicity. The same principles, however, can be easily applied to more complex forms and interactions
First, import the useActionState hook from React as follows:
Now that we’ve imported the hook, let’s look at how to use it in our component.
Let’s try to understand the syntax of useActionState , this hook accepts two primary arguments, one is from submit handler and then second argument is initial state (this also takes third arguments which is an optional, but for simplicity, we’ll focus on the two required arguments in this post)
This hook returns an array with three elements
counterValue— The first value returned, representing the current state. In this case, it’s the counter value.
formAction– This is the function to be called when the form is submitted
isPending— A boolean indicating whether the form action is still processing (useful for showing loading indicators).
Now that we’ve covered the basic import and syntax of useActionState, let’s see how it works in the example
Here’s the complete example using useActionState to increment a counter:
Let’s try to understand the code written in above snippet.As mentioned earlier we have imported useActionState from react and using it in the App component
1 . This hook is taking two arguments
increment: This is an asynchronous function executed when the form is submitted. It takes the previous counter state and returns a new state after a 1-second delay.
Initial State (0): The initial value of the counter is set to 0
-
Increment Function: let’s understand the functionality of increment function. This function takes two parameters
previousState: The last known state of the counter.
formData: Data from the form submission (not used in this case, but from this formData we can access from field values).
This function returns a Promise that simulates an asynchronous operation (like a server call) using setTimeout. After one second, it resolves with the new state, which is previousState + 1. This effectively increments the counter by one.
In jsx we are rendering form within that we are rendering our counter and a button to increment the counter. The action prop of the
