React 19 makes it way easier to manage state and data mutations! This is made possible with the introduction of "Actions" which are functions that use async Transitions.
Actions Reduce Boilerplate
Actions let us skip the manual process of handling pending states, errors, and optimistic updates. If you pass an async function to a transition, React can take over and manage all of this for you.
The easiest way to do this in a component is with the useTransition hook:
In the example above, notice the Add Post button starts a transition when it's clicked which creates a new post. Because this is an asynchronous process, there's a bit of a delay. While the post is being created in the background, the isPending variable flips to true, which we use to show a loading state.
Introducing Form Actions
If the changes in the useTransition hook weren't cool enough, React 19 also has updates to make it easier to manage forms.
The new useActionState and useFormStatus hooks make it easier to work with form submissions. In the last example, we had a separate useState hook for the posts state and a useTransition hook to update the posts state. With form actions, these two things can be rolled into one:
Notice that we're passing a function to the form's action prop. Normally, this should be a string like POST. This might seem a little weird, but it lets us simplify common use cases.
Here's how it works.
The useActionState hook takes an "Action" and the initial state. The "Action" is an asynchronous function that takes the previous state and the formData and then returns the next state.
The useActionState hook returns the current state, a function to invoke the action, and an isPending state that's true when the Action is executing.
What if we want to know a form is submitting somewhere else in the React component tree?
This is where the useFormStatus hook comes into play. This works similar to Context values in React. Because the SubmitButton is nested inside the form element, we can use the hook to get the pending state of the Action. In this case, we disable the button while a post is created.
And that's it! A quick look at Actions and Form Actions. Hopefully this helps you take advantage of some really cool features in React 19.