Acciones en React 19 en la práctica: ¿para qué sirven useActionState, use() y el compilador Retire?

Muchos equipos aumentaron el número de versión de React y dejaron todo lo demás sin cambios. Las indicaciones de carga, el manejo de errores y las actualizaciones óptimas que escribieron hace años siguen presentes en el código, porque la actualización nunca las dañó; simplemente las hizo redundantes. Este es un recorrido por el código escrito a mano que React 19 ahora maneja por usted.

El patrón que sigue apareciendo

Abra casi cualquier componente de formulario en un proyecto de React 19 y encontrará la misma estructura. Hay tres estados: uno para la carga, uno para el error y otro para el éxito. Existe un manejador de envío asíncrono que llama a e.preventDefault(), activa el estado de carga, elimina el error anterior, espera la solicitud, activa el estado de éxito dentro de un try, copia el mensaje al estado de error dentro de un catch y desactiva el estado de carga dentro de un finally.

Esa receta ha sido estándar desde que React se hizo popular, y funciona. En React 19 también resulta innecesaria. Ahora un solo hook se encarga del manejo de solicitudes pendientes, errores y resultados, incluyendo el ordenamiento de las solicitudes secuenciales. La mayoría de los equipos nunca se dio cuenta, ya que la actualización no obligó a ningún cambio.

¿Qué es estable y qué no?

Primero, un mapa rápido, porque algunos artículos describen funciones como ya disponibles cuando en realidad no lo están.

Disponible en la versión estable React 19.x:

• Actions y los hooks basados en ellas: useActionState, useFormStatus y useOptimistic.
• La API use() para leer promesas y contexto durante el renderizado.
• ref como un prop ordinario, lo que convierte a forwardRef en algo obsoleto.
• Metadatos nativos del documento: las etiquetas <title>, <meta> y <link> generadas a partir de componentes.
• El React Compiler, que alcanzó la versión 1.0 en octubre de 2025 y es compatible con versiones desde React 17.
• Añadidos en la versión 19.2 como <Activity> y useEffectEvent.

En el momento de redactar este texto siguen siendo versiones Canary o experimentales: el componente <ViewTransition> y los Fragment Refs. Considere obsoletos cualquier elemento que utilice estas funciones ya lanzadas, y consulte las notas de lanzamiento de la versión que realmente instale.

Actions: el nuevo modelo para el estado asíncrono

La idea central de React 19 es la Action, una función asíncrona que se pasa a una transición. React se encarga de todo lo relacionado con ella: el estado pendiente, el manejo de errores, las actualizaciones optimistas y la reinicialización de formularios, todas esas tareas que antes los equipos tenían que escribir manualmente.

useActionState, useFormStatus y useOptimistic no son tres funcionalidades independientes. Son tres perspectivas de ese mismo mecanismo.

useActionState reemplaza el patrón de tres banderas

En lugar del trío de estados de carga, error y éxito, se escribe una función de acción que recibe el estado anterior y los datos del formulario y devuelve el estado siguiente. Se pasa esta función, junto con un estado inicial, a useActionState. El hook devuelve tres cosas: el estado actual, una función para el formulario y un booleano isPending.

El componente luego realiza tres acciones simples. La propiedad action del formulario recibe directamente la función devuelta. El botón queda deshabilitado mientras isPending sea verdadero. Además, cualquier mensaje se obtiene del estado devuelto. No existe un estado de carga, ni un estado de error, ni try, catch ni finally, ni preventDefault, ni reinicio manual.

Passar una función a action es intencional. Los formularios HTML siempre han tenido un atributo action, y React 19 lo recuperó. Esto permite el mejoramiento progresivo, de modo que un formulario puede enviarse incluso sin JavaScript, y React mejora su comportamiento una vez que se cargan los scripts.

useFormStatus permite que un botón conozca su formulario

El uso más práctico de useFormStatus es un botón de envío reutilizable. Dentro de él, el hook devuelve una bandera pending que describe el formulario padre, sin que se transmitan propiedades. El botón se desactiva y cambia su etiqueta a algo como “Guardando” mientras el formulario está en proceso. Puedes colocar ese componente en cualquier lugar dentro de cualquier formulario y funcionará sin problemas, lo que elimina la necesidad de pasar propiedades de forma indirecta para una necesidad muy común. Una advertencia: el hook lee el estado del formulario que contiene al componente, por lo que este debe renderizarse dentro del formulario y no junto a él.

useOptimistic hace que la retroalimentación instantánea sea manejable

Las actualizaciones optimistas muestran al usuario el resultado esperado de inmediato, antes de que el servidor lo confirme, y se corrigen solas si la solicitud falla. Al hacerlo a mano, se requieren IDs temporales, una lista separada de elementos pendientes, lógica de fusión y código de reversión en una rama de errores. Es fácil cometer errores sutiles.

Con useOptimistic, le proporcionas al hook la lista real junto con un pequeño reductor que describe cómo agregar un elemento con un marcador de pendiente. Dentro de la acción del formulario, llamas al setter que devuelve y luego esperas a que se guarde. La interfaz muestra el nuevo elemento de inmediato, quizás con opacidad reducida mientras está pendiente. Cuando la acción finaliza, los datos reales reemplazan la copia optimista, y si el guardado falla, React vuelve automáticamente al estado anterior. No se necesita ningún bloque de captura ni reversión manual.

use(): leer recursos de forma condicional

use() es una nueva API que lee un recurso, como una promesa o un contexto, durante el renderizado. A diferencia de todos los demás hooks, puede llamarse de forma condicional. Un componente puede leer información del usuario, devolver un resultado temprano cuando los detalles estén ocultos y, solo entonces, leer las preferencias. Envuelva el árbol en un límite Suspense con un valor de respaldo, y React suspenderá el proceso hasta que lleguen los datos.

Hay una restricción importante: las promesas pasadas a use() deben ser estables entre renders, por lo que deben crearse fuera del componente o a través de una capa de caché como React Query o SWR, o incluso un mapa simple a nivel de módulo indexado por ID. Si se recrea una promesa en cada render, el valor de respaldo permanecerá en pantalla para siempre.

ref como prop

Este cambio es sencillo. Ahora los componentes funcionales reciben ref como un prop normal, por lo que se puede pasar directamente al elemento de entrada subyacente sin envolver el componente en forwardRef. El comportamiento es idéntico, con un envoltorio y una importación menos. El código existente con forwardRef seguirá funcionando, ya que la descontinuación es gradual y no causa problemas, pero los nuevos componentes no deberían usarlo.

El compilador de React

El compilador representa la actualización más discreta de todas. Analiza los componentes en el momento de la compilación y aplica la memorización de forma automática. Normalmente, los equipos implementan esta funcionalidad de manera inconsistente con useMemo, useCallback y React.memo, o la omiten por completo. Usted solo necesita escribir componentes sencillos y el compilador se encargará de insertar correctamente la caché.

Para probarlo, instale el plugin de Babel babel-plugin-react-compiler e inclúyalo en la lista de plugins de su configuración de Babel. Dado que también es compatible con React 17 y 18, puede adoptarlo sin tener que actualizar primero React, lo cual ayuda a los equipos que están atascados en una versión específica pero desean aprovechar las ventajas de rendimiento.

Nota de seguridad para componentes de servidor

Advertencias de seguridad relacionadas con denegación de servicio y exposición de código fuente afectaron a los paquetes react-server-dom-* alrededor de principios de 2026, y se publicaron versiones corregidas para cada línea de soporte. Si utiliza Componentes de Servidor de React, verifique su versión instalada en relación con las advertencias actuales y utilice una versión corregida o más reciente. No confíe en su memoria para recordar qué versión es segura.

Qué hacer esta semana

• Nuevas formas: utilice useActionState desde el primer día, definiendo una acción, pasándosela al hook y leyendo isPending a partir de lo que devuelve, sin necesidad de usar banderas manuales.
• Manejadores existentes: no vuelva a escribir todo de una vez. Elija uno, conviértalo en una Action y observe cómo se lee. La mejora en la legibilidad suele ser lo suficientemente evidente como para determinar por sí mismo la prioridad de la migración.
• El compilador: ándíguelo en su configuración de compilación. Es un cambio pequeño, funciona con el código existente y no requiere reescrituras, lo que lo convierte en la mejor opción de la era React 19 con el efecto más amplio.
• Componentes del servidor: verifique su versión en relación con las correcciones de seguridad.

Los titulares llamaron la atención al ser publicados. El cambio más importante está en lo que se esconde detrás: Actions como modelo estándar para cualquier cambio de estado asíncrono, lo que elimina silenciosamente una gran parte del código que los desarrolladores de React escriben a diario. Muchos equipos actualizaron sus sistemas, pero el código aún está pendiente.