Con la llegada de React 19, se introdujo una nueva funcionalidad llamada Actions, pensada para facilitar el trabajo con operaciones asincrónicas y la gestión del estado del servidor. Esta característica permite simplificar tareas comunes como enviar formularios, hacer peticiones a APIs y manejar errores, sin necesidad de escribir tanto código como antes.

¿Qué son las Actions?

Las Actions son funciones que se encargan de manejar tareas que normalmente requieren comunicarse con el servidor o actualizar información en segundo plano. Por ejemplo, cuando un usuario envía un formulario o hace clic en un botón que debe guardar algo en la base de datos, una Action puede encargarse de todo ese proceso.

React ahora permite asociar estas funciones directamente a elementos como formularios usando la propiedad action, lo que evita tener que escribir controladores separados o estados adicionales para gestionar el resultado de esas acciones.

Cómo funcionan

React 19 introduce un hook llamado useActionState que ayuda a manejar el estado de una acción, incluyendo si está en proceso, si ocurrió un error o si se completó con éxito. Este estado se actualiza automáticamente, lo que reduce la necesidad de gestionar banderas como loading o error manualmente.

function ContactForm() {
  const [formState, sendMessage] = useActionState(
    async (formData) => {
      const response = await fetch('/api/contact', {
        method: 'POST',
        body: JSON.stringify(Object.fromEntries(formData)),
      });

      if (!response.ok) {
        throw new Error('No se pudo enviar el mensaje');
      }

      return await response.json();
    },
    null
  );

  return (
    <form action={sendMessage}>
      <input name="name" placeholder="Nombre" required />
      <input name="email" placeholder="Correo" type="email" required />
      <button type="submit" disabled={formState.pending}>Enviar</button>
      {formState.error && <p>Error: {formState.error.message}</p>}
    </form>
  );
}

En este ejemplo, sendMessage es una Action que se ejecuta cuando el formulario se envía. El hook useActionState gestiona el estado del envío y muestra un mensaje si ocurre un error.

Server Actions

React 19 también permite definir acciones del lado del servidor, conocidas como Server Actions. Estas se escriben en archivos con la directiva 'use server', lo que indica que deben ejecutarse en el servidor. Luego pueden ser llamadas desde un formulario del lado del cliente.

// actions.js
'use server';

export async function guardarUsuario(formData) {
  // lógica en el servidor
}

// componente del cliente
'use client';

import { guardarUsuario } from './actions';

function Registro() {
  return (
    <form action={guardarUsuario}>
      <input name="usuario" required />
      <button type="submit">Registrar</button>
    </form>
  );
}

Con esta integración, ya no es necesario crear rutas de API aparte. Todo se gestiona con funciones directamente enlazadas al formulario.

Las Actions en React 19 son una forma más directa y simple de manejar operaciones que involucran comunicación con el servidor. Permiten reducir la cantidad de código necesario y facilitan la gestión del estado de estas acciones. Ya sea desde el cliente o el servidor, React ofrece ahora una herramienta más clara para trabajar con formularios, peticiones y lógica asincrónica.