{
  "id": 4811175,
  "title": "React 19 Actions: I Explained 3 Hooks Without Ever Explaining What an Action Is",
  "url": "https://urgent.news/2026/09/01/react-19-actions-i-explained-3-hooks-without-ever-explaining-what-an",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-01T07:30:35.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/shubhradev/react-19-actions-i-explained-3-hooks-without-ever-explaining-what-an-action-is-m79"
  },
  "original_language": "en",
  "account": "Three sections make up this series, and I struggled to give a clear definition of the term that appears at the beginning of each hook. I didn't find this trivial. Going back to paragraphs one through three, I constantly used the word \"Action\" without explaining what it actually meant. In the first part, I introduced three state variables I'd manually created for years, a result, a pending flag, an error, and demonstrated how useActionState combines them into a single call. In part two, I created a comment box that felt instant before the server replied. In part three, I allowed a submit button in a three-component distance to read a form's pending state without passing any props. The same mechanism underpinned all three problems, yet I never explicitly named it. That's the gap this post addresses. Not a new bug this time; rather, the common thread behind the last three issues. The word that kept appearing without definition is \"Action.\" According to React's official documentation, an Action is a function called inside startTransition. That's the sole criterion for classification. Consider the following function:\n\n```javascript\nasync function submitFeedback(previousState, formData) {\nconst message = formData.get('message');\nawait saveFeedback(message);\nreturn {sent: true};\n}\n```\n\nThis function could reside in your codebase indefinitely without behaving like an Action. The switch occurs not within the function's code but when it passes through one of four gateways: a direct startTransition call, useTransition's version of that call, a form's action prop that takes a function instead of a string, or useActionState. When any of these mechanisms transport a function, React takes over the transition and pending tracking automatically. Notably, it doesn't universally provide the function's return value. useTransition offers isPending and nothing else, while a raw startTransition call yields no output at all. useActionState is the only gateway explicitly designed to capture the return value and store it as state, explaining why isPending and a real result appeared together in part one but not elsewhere in the series. The timing of this revelation was crucial. Parts one through three seemed like three separate hooks when viewed individually. They revealed three distinct windows onto the same room when I understood the underlying principle. useFormStatus reads the pending status of the nearest parent form, and now you understand why this status exists due to an Action wrapping the submission. useOptimistic is an exception. It isn't a gateway that transforms a function into an Action. It's a setter called from within an ongoing Action. Calling it outside a Transition will not produce the desired effect shown in part two. The need for this concept arose because every form previously required the same three pieces of state, wired manually each time. This pattern wasn't unique to forms either; a delete button, a follow toggle, a checkout step all necessitated the same scaffolding built from scratch. React 19 now enables the use of async functions within transitions, forming the foundation for everything else in this series. What you create on this foundation—whether you receive a tracked result or just a pending flag—depends on which of the four gateways you traverse. useActionState is the most comprehensive, capturing the return value as state. The others provide less by design.",
  "summary": "Three parts into this series, and if you'd asked me to define the word sitting underneath every single hook I'd taught you, I'm not sure I could have done it cleanly. That's not false modesty. Go back and read Parts 1 through 3. I used the word \"Action\" constantly. I never once stopped to say what one actually is. Part 1 opened with three state variables I'd hand-rolled for years, a result, a…",
  "key_points": [],
  "editors_take": "React 19's Actions concept unifies previously separate state management patterns for forms and other interactive elements, enabling async functions within transitions and simplifying manual state scaffolding.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}