Suggest an edit

Improve this article

Refine the answer for “Actions in React 19”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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](https://react.dev/blog/2024/12/05/react-19))
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](https://react.dev/blog/2024/12/05/react-19))
- **Errors**: If an Action fails, React can tie that into the Error Boundary mechanism and the corresponding UI display. ([mux.com](https://www.mux.com/blog/react-19-server-components-and-actions))
- **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](https://www.mux.com/blog/react-19-server-components-and-actions))
- **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](https://react.dev/blog/2024/12/05/react-19))
- **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](https://react.dev/reference/rsc/server-functions))

---

## 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](https://react.dev/blog/2024/12/05/react-19))

---

## 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts439 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.