Actions in React 19

ReactJunior~2 min read

What Actions are

An Action is essentially a function (usually async) that triggers a mutation (a data change, a form submission, handling an event) that React now understands as a single unit with automatic state, error, and optimistic-update handling. (react.dev) That is, instead of manually writing isLoading, try/catch, setError, setPending, you can define an Action function and React does much of that for you.

Core capabilities of Actions

Here are the key features the Actions mechanism provides:

Pending status: React automatically tracks that an Action is running, and you can use that status in the UI. (react.dev)
Errors: If an Action fails, React can tie that into the Error Boundary mechanism and the corresponding UI display. (mux.com)
Optimistic updates: You can show the user the expected result right away (before the operation finishes), and roll it back or adjust it on failure. (mux.com)
Form integration: An Action can be passed as a form handler (action / formAction), and React automatically wires the form to the Action, handling submission, resetting the form, and so on. (react.dev)
Server Actions / Server Functions: Actions can run on the server (server functions) and be called from a client component, which simplifies the architecture. (react.dev)

Usage example

javascript

// Say, in React 19:
import { useActionState } from 'react';

async function updateName(previousState, formData) {
  const name = formData.get('name');
  const error = await api.updateName(name);
  return error ? { error } : null;
}

function ChangeName() {
  const [error, submitAction, isPending] = useActionState(updateName, null);

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Update
      </button>
      {error && <p>{error.error}</p>}
    </form>
  );
}

Here:

updateName is the Action.
useActionState provides: the current state (for example, an error), a submitAction function to wire to <form>, and an isPending flag.
React takes care of the waiting, error handling, and resetting the form. (react.dev)

Why this is convenient

It reduces boilerplate (previously there was a lot of useState, useEffect, try/catch, isLoading).
It makes forms and data mutations more declarative.
It works better with concurrent rendering and the server side (SSR).
It improves developer convenience and code readability.

What's important to know

Actions aren't just an event (onClick) like before, they're a separate abstract unit with a lifecycle.
Despite being declarative, you still need to think through the logic inside the Action (what happens on success/failure).
Some parts require support from the framework or bundler (for example, Server Actions).
This is a new model, so libraries may not be fully adapted to it yet.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Actions in React 19

#What Actions are

#Core capabilities of Actions

#Usage example

#Why this is convenient

#What's important to know