React 19 y Server Actions: Hooks Modernos y Gestión de Estado
Lo Que Dominarás en Este Tutorial
- Understand Server Components vs. Client Components.
- Implement form actions with useActionState and useOptimistic.
1. Handling Form Mutations with Server Actions
React 19 elevates forms to first-class citizens with native async actions.
import { useActionState } from "react";
async function updateProfile(prevState, formData) {
const name = formData.get("name");
return { success: true, name };
}Evaluación Rápida: Pon a Prueba tus Conocimientos
Preguntas Frecuentes
Profundizando: la arquitectura de React 19 en la práctica
En un proyecto real de React 19, las funciones de este tutorial cambian dónde vive el código, no solo cómo se escribe. Los Server Components pasan a ser la opción por defecto para todo lo que no necesita interactividad, lo que mantiene la obtención de datos en el servidor y pequeño el paquete del cliente. Las Actions se convierten entonces en la capa de mutación: los formularios envían a funciones del servidor, useActionState sigue el resultado y useOptimistic pinta al instante el resultado esperado mientras la petición está en curso. La habilidad práctica consiste en trazar bien la frontera: servidor por defecto, pequeñas islas de cliente donde realmente viven el estado y los eventos, y props serializables cruzando entre ambos lados. Los equipos que adoptan esa separación con intención obtienen casi todo el beneficio de React 19; los que no, se quedan con un árbol de componentes renombrado.
Errores comunes
- Directivas «use client» en bloque. Marcar árboles enteros como Client Components tira por la borda el ahorro de paquete y las ventajas de obtención de datos que los Server Components existen para ofrecer.
- Cargar datos dentro de useEffect. Traer datos del servidor con efectos y spinners es el patrón antiguo; en React 19 esos datos suelen pertenecer a un Server Component o pasar por el hook use().
- Actualizaciones optimistas sin ruta de fallo. useOptimistic muestra el resultado esperado de inmediato, pero el código sigue teniendo que contemplar que la acción falle y que la interfaz revierta el cambio.
- Props no serializables cruzando la frontera. Las funciones y las instancias de clases no pueden pasar de un Server Component a un Client Component; pasa datos planos y deja que cada lado haga su propio trabajo.
Preguntas frecuentes
¿Puedo usar hooks como useEffect en Server Components?
No. Como explica la sección de preguntas de este tutorial, los hooks solo se ejecutan en Client Components marcados con «use client»; los Server Components se renderizan una única vez en el servidor.
¿Qué hace realmente el hook use()?
Lee un valor —una promesa o un contexto— directamente dentro del render, de modo que un componente puede suspenderse hasta que los datos se resuelven en lugar de pasarlo todo por props y efectos.
¿Los formularios de React 19 necesitan JavaScript para funcionar?
Los formularios construidos sobre Actions están diseñados para funcionar con mejora progresiva, así que un formulario puede enviarse incluso antes de que el JavaScript del cliente haya cargado por completo.