Handling form submission with the Action State Hook
React 19 introduced a new feature called Form Actions. As we have seen in the previous chapters, performing data mutations in response to user actions is a common use case in web applications. Often, these data mutations require making an API request and handling the response, which means dealing with loading and error states. For example, when we made the CreatePost
component, we created a form that inserts a new post into the database upon submission. In this case, React Query already helped us out a lot by simplifying loading and error states. However, with React Form Actions there is now a native way to deal with these states, by using the Action State Hook.
Introducing the Action State Hook
The Action State Hook is defined as follows:
const [state, action, isPending] = useActionState(actionFn, initialState)
Let’s break it down a bit to get a better understanding of it. To define an Action State Hook,...