← Back to Home
Desarrollo5 min

React 19 Actions: Say Goodbye to Boilerplate and Hello to Cleaner Code

C
Camilo Pinzon
April 8, 2025
React 19 Actions: Say Goodbye to Boilerplate and Hello to Cleaner Code

If you're tired of juggling event handlers, async logic, and state updates like flaming swords, Actions in React 19 are here to save the day.



What Are Actions in React 19?


React 19 introduces a brand-new feature called Actions and it's a game-changer.

In simple terms, Actions are a new way to handle events, async logic and state updates in one clean and unified flow. Think of it as a smarter, more organized version of your current onClick, useEffect, or even Redux-style dispatches, but built natively into React.

No more spaghetti logic, no more nested asyc functions inside event handlers. Just pure, readable, scalable code.



Why should you care?


Let's be honest: managing state changes and side effects in React can get messy.

Whether you're:


  1. A junior dev struggling with useEffect dependencies,
  2. A mid-level dev trying to keep your components clean,
  3. Or a Senior dev tired of maintaining overly-complicated logic trees.


Actions offer a new pattern that somplifies everything from handling form submissions to server mutations.



The Old Way vs The Actions Way


Old Way

function ContactForm() {
const [status, setStatus] = useState('idle');

const handleSubmit = async(e) => {
e.preventDefault();
setStatus('loading');

try {
const res = await fetch('api/contact', {method: 'POST'});
if (!res.ok) throw new Error('Something went wrong');
setStatus('success');
} catch (error) {
setStatus('error');
}
};

return (
<form onSubmit={handleSubmit}>
{/* Form fields */}
</form>
);
}

Not bad, but it mixes UI Logic and async logic. Imagine doing this across dozens of components.


The Actions Way (React 19)

'use client';
import { useActionState } from 'react';

async function submitContactForm(_, formData) {
async res = await fetch('/api/contact', {
method: 'POST',
body: formData,
});

if (!res.ok) throw new Error('Submision failed');
return { success: true };
}

export default function ContactForm() {
const [state, formAction] = useActionState(submitContactFrom, { success: false });

return (
<form action={formAction}>
{ /* form fields */ }
<button type="submit">Send</button>
{state.success && <p>Message sent!</p>}
</form>
);
}

What Just Happened?


Let's break it down:


  1. submitContactForm is your Action - it handles everything: async, fetch, login.
  2. useActionState gives you access to the result or state of that Action.
  3. The form's action attribute is now wired directly to that logic.


No need for useState, useEffect, or onSubmit handlers. Perfect for server / client actions alike. Declarative and intuitive.



Bonus: Built-In Progressive enhancement


Actions in React 19 play really well with progressive enhancement. That means:


  1. You can build forms that work without JavaScript.
  2. React enhances them automatically when JavaScript is available
  3. This aligns beautifully with the web's native behavior



Wait, So... Are Actions Replacing Redux? useEffect?


No quite, but they can in may cases.

If you are building apps that involve:


  1. Form submissions
  2. Data mutations
  3. Triggering async logic from UI


Then yes, Actions could replace a ton of biolerplate logic you used to write with useEffect, useReducer, or even Redux thunks.

Think of Actions as server + client + state manager, all rolled into one API.



The Best Use Cases for Actions


Here's where Actions shine:


  1. Handling form submissions
  2. Managing server mutations
  3. Triggering side effects (like sending emails or saving data)
  4. Reducing prop drilling and useState madness


And yes, they work great with React server Components too.



Ready to try it?


To use Actions, make sure you're using:


  1. React 19,
  2. With React DOM or React Server Components (Next.js) that support this pattern.


If you're using Next.js 14 with tha App Router, you're already set up to take advantage of Actions.



Next Steps


  1. Look for the new related Hooks: useTransition, useOptimistic, useFormstatus
  2. Automatic state magement



Final Thoughts


Actions in React 19, simplify your codebase, make async logic cleaner and let your components focus on what they do best: UI.

If you've been hesitating to try new patterns, this is one that's 100% worth experimenting with.



What do you think?


Are you already using Actions in your projects? What are your favorite (or least favorite) parts?

Let's talk inthe comments or share this post it it helped you to understant what's new in React 19.