Guía Práctica de React 19: Actions, useActionState y Server Components

React · Por Gabriel Gómez · 15 Jun 2026 · 6 min de lectura

React 19 ha llegado con cambios fundamentales en la forma en que manejamos operaciones asíncronas y mutaciones de datos. La mayor novedad es el concepto de Actions (Acciones).

¿Qué son las Actions?

Una función que utiliza transiciones asíncronas se denomina formalmente una "Action". Las Actions manejan automáticamente el estado de carga (loading), los errores y las actualizaciones optimistas de la interfaz de usuario.

Por ejemplo, antes teníamos que escribir múltiples estados de carga para un formulario:

const [isPending, setIsPending] = useState(false);
const handleSubmit = async () => {
  setIsPending(true);
  await enviarDatos();
  setIsPending(false);
};

Con React 19, las transiciones gestionan esto automáticamente usando el hook useActionState:

const [state, formAction, isPending] = useActionState(
  async (previousState, formData) => {
    const error = await enviarDatos(formData);
    if (error) return error;
    return null;
  },
  null
);

El nuevo hook use()

React 19 introduce use(), una API que te permite leer recursos como Promesas o Contextos directamente en la fase de renderizado. A diferencia de los hooks tradicionales, use() se puede llamar condicionalmente o dentro de bucles, abriendo nuevas posibilidades en la arquitectura de componentes.

En resumen, React 19 está diseñado para hacer que las aplicaciones sean más rápidas de escribir y más eficientes de ejecutar en el cliente y el servidor.