← Volver al Inicio
Desarrollo5 min

Actions en React 19: Dile adiós al código repetitivo y hola a la limpieza

C
Camilo Pinzon
8 de abril de 2025
Actions en React 19: Dile adiós al código repetitivo y hola a la limpieza

Si estás cansado de hacer malabares con los manejadores de eventos, la lógica asíncrona y las actualizaciones de estado como si fueran espadas en llamas, ¡las Actions en React 19 han llegado para salvar el día!



¿Qué son las Actions en React 19?


React 19 introduce una nueva funcionalidad llamada Actions y es un verdadero cambio de juego.

En términos simples, Actions son una nueva forma de manejar eventos, lógica asincrónica y actualizaciones de estado en un solo flujo limpio y unificado. Piénsalo como una versión más inteligente y organizada de tu actual onClick, useEffect, o incluso despachos al estilo Redux, pero integrado de forma nativa en React.

No más lógica enredada, no más funciones asincrónicas anidadas dentro de handlers. Solo código puro, legible y escalable.



¿Por qué debería importarte?


Seamos honestos: manejar cambios de estado y efectos secundarios en React puede volverse complicado.

Ya seas:


  1. Un dev junior luchando con las dependencias de useEffect,
  2. Un dev intermedio intentando mantener tus componentes limpios,
  3. O un dev senior cansado de mantener árboles lógicos demasiado complejos.


Actions ofrecen un nuevo patrón que simplifica todo, desde el manejo de formularios hasta las mutaciones al servidor.



El modo antiguo vs el modo Actions


Modo antiguo

jsx
CopyEdit
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>
);
}

Nada mal, pero mezcla lógica de UI con lógica asincrónica. Imagina hacer esto en docenas de componentes.


El modo Actions (React 19)

jsx
CopyEdit
'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>
);
}


¿Qué acaba de pasar?


Vamos a desglosarlo:


  1. submitContactForm es tu Action – maneja todo: async, fetch, login.
  2. useActionState te da acceso al resultado o estado de esa Action.
  3. El atributo action del formulario ahora está conectado directamente con esa lógica.


No necesitas useState, useEffect, ni onSubmit handlers. Perfecto tanto para acciones del cliente como del servidor. Declarativo e intuitivo.



Bonus: Mejora progresiva incorporada


Las Actions en React 19 funcionan muy bien con la mejora progresiva. Eso significa:


  1. Puedes crear formularios que funcionen sin JavaScript.
  2. React los mejora automáticamente cuando JavaScript está disponible.


Esto se alinea perfectamente con el comportamiento nativo de la web.



Espera… ¿entonces las Actions reemplazan a Redux? ¿a useEffect?


No exactamente, pero en muchos casos sí pueden hacerlo.

Si estás creando apps que involucran:


  1. Envío de formularios
  2. Mutaciones de datos
  3. Disparar lógica asincrónica desde la UI


Entonces sí, Actions podrían reemplazar un montón de lógica repetitiva que antes escribías con useEffect, useReducer, o incluso con thunks de Redux.

Piensa en Actions como servidor + cliente + gestor de estado, todo en una sola API.



Los mejores casos de uso para Actions


Aquí es donde las Actions brillan:


  1. Manejo de envíos de formularios
  2. Gestión de mutaciones del servidor
  3. Disparo de efectos secundarios (como enviar correos o guardar datos)
  4. Reducción del "prop drilling" y del caos con useState.


Y sí, funcionan genial con los React Server Components también.



¿Listo para probarlo?


Para usar Actions, asegúrate de estar utilizando:


  1. React 19,
  2. Con React DOM o React Server Components (Next.js) que soporten este patrón.


Si estás usando Next.js 14 con App Router, ya estás preparado para aprovechar las Actions.



Próximos pasos


  1. Explora los nuevos Hooks relacionados: useTransition, useOptimistic, useFormStatus
  2. gestión de estado automática.



Reflexiones finales


Las Actions en React 19 simplifican tu base de código, hacen más limpia la lógica asincrónica y permiten que tus componentes se enfoquen en lo que mejor hacen: la UI.

Si has estado dudando en probar nuevos patrones, este definitivamente vale la pena.



¿Qué piensas?


¿Ya estás usando Actions en tus proyectos? ¿Cuáles son tus partes favoritas (o las que menos te gustan)?

Hablemos en los comentarios o comparte este post si te ayudó a entender qué hay de nuevo en React 19.