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 <form>is set to formAction, which will handle the submission upon clicking Increment button.
inside the form we are conditionally rendering either "updating..." if isPending is true (indicating the form is processing), or displays the current counterValue.
The “Increment” button is disabled while isPending is true to prevent additional submissions during the ongoing update.
Finally we have implemented a simple counter using the useActionState hook in React, where the counter is incremented asynchronously by one second each time the form is submitted. It also displays a loading message ("Updating...") while the increment action is in progress.
Now we’ve understood the useActionState , let’s see some of the benefits of it.
Benefits of useActionState
Simplified State Management: The useActionState hook automatically updates the component's state based on the result of the action function, reducing the need for manually managing state changes.
Loading State Handling: The isPending value provided by the hook makes it easy to display loading indicators or disable form elements during asynchronous actions.
Automatic Form Reset: After a successful submission, the form is automatically reset to its initial state, making the development process more efficient.
Cleaner, More Maintainable Code: By encapsulating form state and actions,
useActionState promotes a more concise and maintainable codebase.
The useActionState hook is a valuable addition to React for handling form actions and asynchronous state updates. It simplifies common tasks like managing loading states and resetting forms after submission. By using this hook, you can write cleaner, more efficient, and maintainable code.
That’s it for now! Thanks for reading. See you in the next post!
Top comments (0)