React 19: Novedades y mejoras para tus proyectos Web

React es seguramente la biblioteca más popular para el desarrollo de interfaces de usuario Web reutilizables. Con cada nueva versión, Meta suele sorprendernos con mejoras en el rendimiento y características que simplifican nuestras vidas como desarrolladores.

React 18 salió en marzo de 2022, pero la llegada de React 19 ha llevado su tiempo. Aunque la anunciaron ya en marzo de este año tras muchos retrasos, al final ha tardado mucho más de los esperado, apareciendo la versión definitiva en diciembre de 2024. El equipo de React invirtió varios meses revisando, probando y puliendo las características. Se tomaron este tiempo adicional para asegurarse de que las nuevas funcionalidades fuesen estables y que la comunidad contase con una base sólida para seguir construyendo aplicaciones de alto rendimiento.

Esta versión viene con cambios que mejoran el rendimiento, la experiencia de usuario y la gestión de errores. Además, se han incluido nuevas características que facilitan el desarrollo y la escritura de código más limpio.

Pero no te tienes que preocupar demasiado: React 19 no tiene por qué darte dolor de cabeza. El equipo de React se ha esforzado para que la transición sea lo más suave posible. De hecho, se espera que los cambios no afecten a la mayoría de las aplicaciones. Y para ayudarte aún más, se ha publicado la versión React 18.3, que incluye avisos para las APIs que se han quedado obsoletas y otras modificaciones necesarias para la migración a React 19 sin que tengas que hacerlo todavía.

Además de todo esto, hay un trasfondo muy interesante sobre la filosofía que guía a React hacia donde está ahora. Este trasfondo ayuda a entender por qué las decisiones en esta versión tienen tanto impacto en nuestro trabajo diario.

El equipo de React ha publicado un largo y detallado documento sobre React 19 en el que explican todas las nuevas características de la biblioteca. Así que, en lugar de repetir lo mismo te dejo que consultes el original y en este artículo me voy a centrar en analizar brevemente la filosofía que hay detrás de esta actualización (y las futuras) y darte un resumen de alto nivel de las novedades y cambios más importantes de la nueva versión, que luego puedes ir a consultar al documento original o a la documentación oficial si quieres.

Arrancamos...

Filosofía de la actualización en React 19

Esta versión de React, en el fondo de lo que va es de mejorar la experiencia del desarrollador y preparar React para el futuro. Algunos cambios filosóficos clave que han guiado el desarrollo actual (y futuro) de React son:

• Priorizar la estabilidad y la compatibilidad: esta versión se enfoca en proporcionar una base sólida para futuras actualizaciones, asegurando una transición fluida para los desarrolladores. La mayoría de las aplicaciones no se verán afectadas por los cambios en React 19, lo cual es una gran noticia para los desarrolladores. Además han creado codemods para que puedas automatizar las actualizaciones si lo necesitas.
• Mejorar la experiencia del desarrollador: se han introducido nuevas herramientas y API para facilitar el desarrollo, mejoras en la gestión de errores y nuevas funciones para manejar estados pendientes y actualizaciones optimistas.
• Adoptar patrones modernos de desarrollo web: se fomenta el uso de prácticas modernas como la generación de sitios estáticos, componentes del servidor y el uso de módulos ES, además de  haber actualizado TypeScript.
• Mejorar el rendimiento y la eficiencia: se han realizado optimizaciones en el núcleo de React para mejorar la velocidad y el tamaño del paquete, así como mejoras en la hidratación para una mejor experiencia de usuario.
• Fomentar las mejores prácticas: se desaconseja el uso de API obsoletas y patrones de código ineficientes, guiando a los desarrolladores hacia soluciones más robustas y mantenibles.

Nuevas funcionalidades clave en React 19

Hay un montón de detalles técnicos que puedes ver en el post original del equipo de React. Así que vamos al grano con un resumen rápido de las nuevas características clave que tiene React 19:

1. ⚡️ Acciones: una nueva funcionalidad que simplifica la gestión de estados pendientes, actualizaciones optimistas, manejo de errores y formularios. Las Acciones permiten usar funciones asíncronas en las transiciones para manejar automáticamente estos aspectos. useTransition maneja el estado pendiente, mientras que useOptimistic facilita las actualizaciones optimistas. Las Acciones también se integran con las nuevas funciones de <form> en react-dom, permitiendo enviar formularios automáticamente usando Acciones mediante el paso de funciones como atributos action y formAction del formulario. Además, se introduce el hook useActionState para manejar casos comunes de Acciones y useFormStatus para acceder a información sobre el <form> principal sin necesidad de atributos. Las acciones revolucionarán la forma en que interactuan con los elementos del DOM.
2. 🪝 Hooks mejorados: React 19 introduce mejoras importantes en varios hooks existentes pero también añade algunos nuevos para optimizar el desarrollo. useTransition ahora maneja el estado pendiente en las Acciones que acabamos de ver, simplificando el manejo de actualizaciones asíncronas. useDeferredValue permite ahora pasarle un valor inicial y programar una actualización posterior en segundo plano cuando el valor esté disponible, consiguiendo un renderizado más fluido. StrictMode también ha sido mejorado para detectar errores de forma más efectiva, incluyendo la reutilización de resultados "memoizados" en useMemo y useCallback durante el segundo renderizado. Además, useRef ahora requiere que se le pase un argumento, asegurando que todas las referencias sean mutables (que era una de las quejas habituales). Finalmente, se introduce el hook useOptimistic para manejar actualizaciones optimistas, de forma que puedes mostrar al usuario el estado final desde el primer momento sin esperar a que se procese una solicitud asíncrona.
3. 🧩 Componentes web personalizados: ahora tenemos un soporte muy mejorado para componentes web personalizados, que logran pasar todas las pruebas de Custom Elements Everywhere. Esto significa que ¡podrás utilizar componentes web de terceros en tu aplicación React! En versiones anteriores, el uso de componentes web personalizados era complejo ya que trataba las propiedades desconocidas en los componentes como atributos, no como propiedades. Ahora esto está solucionado y se añade soporte para propiedades tanto en el cliente como durante el renderizado del lado del servidor (SSR). Durante el SSR, las propiedades con valores primitivos se renderizan como atributos, mientras que las que tienen tipos no primitivos se omiten. En el renderizado del lado del cliente, las propiedades que coincidan con una propiedad de la instancia del componente web personalizado se asignan como propiedades, de lo contrario se asignan como atributos.
4. 🔖 Metadatos del documento: otra mejora muy necesaria. React 19 introduce un nuevo soporte para renderizar etiquetas de metadatos de la página directamente en los componentes. Esto significa que etiquetas como <title>, <link> y <meta> se pueden colocar dentro de los componentes en lugar de tener que manejarlas a mano en la sección <head> de la página. React se encargará de mover automáticamente estas etiquetas a la sección <head> durante el renderizado. Esta funcionalidad simplifica la gestión de metadatos y elimina la necesidad de bibliotecas externas para casos simples y habituales (aunque aún pueden ser útiles para escenarios más complejos).
5. ♻️ Precarga de activos: hace poco te hablé de esto en el blog: Mejora el rendimiento de tus páginas web con técnicas de carga especulativa. Durante la carga inicial del documento y en las actualizaciones del lado del cliente, informar al navegador sobre los recursos que probablemente necesitará cargar lo antes posible puede tener un efecto dramático en el rendimiento de la página. React 19 incluye una serie de nuevas API para cargar y precargar los recursos del navegador para que sea lo más fácil posible una carga de recursos eficiente.
6. 💄 Mejoras en el manejo de hojas de estilo y scripts asíncronos: permitiendo una mejor integración y control sobre estos elementos. En cuanto a las hojas de estilo, ahora se puede especificar su precedencia para que React gestione el orden de inserción en el DOM, asegurando que se carguen antes que el contenido que depende de ellas. Esto facilita la ubicación de las hojas de estilo junto a los componentes que las utilizan, mejorando la organización del código. Para los scripts asíncronos, ahora se permite renderizarlos en cualquier parte del árbol de componentes sin preocuparse por la reubicación o la duplicación. React se encarga de deduplicar los scripts asíncronos, garantizando que se carguen y ejecuten solo una vez, incluso si son renderizados por múltiples componentes. Esto facilita mucho la vida.
7. 🚀 Renderizado estático en el servidor: nuevas APIs prerender y prerenderToNodeStream que mejoran a renderToString al esperar la carga de datos para la generación de HTML estático. Permiten prerrenderizar un árbol de React a HTML estático, esperando que todos los datos se carguen antes de devolver la secuencia HTML estática. Las secuencias se pueden convertir a cadenas o enviarse con un Stream. Eso sí, de momento no soportan el envío de contenido a medida que se carga, algo que sí soportan las API de renderizado del lado del servidor existentes de React DOM.
8. 🔥 Componentes de lado servidor: React ha introducido el concepto de componentes del servidor tras años de desarrollo. Ahora podrás utilizar esta función con Next.js. ncluyendo la capacidad de renderizar componentes antes del empaquetado en un entorno separado. Esto permite que los componentes del servidor se ejecuten durante la compilación o para cada solicitud, lo que mejora el rendimiento y la eficiencia. Además, React 19 presenta "Acciones de servidor", que permiten a los componentes del cliente ejecutar funciones asíncronas en el servidor. Si bien estas características son estables en React 19, las API subyacentes utilizadas para implementar frameworks o empaquetadores de componentes de servidor pueden cambiar en próximas versiones "minor", por lo que se recomienda fijar una versión específica de React. Estabilizarán estas API en el futuro, pero de momento considéralas como betas.
9. 🗑️ APIs obsoletas eliminadas: para optimizar y simplificar la biblioteca. Estas incluyen: propTypes y defaultProps para funciones, el contexto heredado que utilizaba contextTypes y getChildContext, las referencias de cadena, las fábricas de patrones de módulo, React.createFactory y react-test-renderer/shallow. En react-dom, se eliminaron ReactDOM.render, ReactDOM.hydrate, unmountComponentAtNode, ReactDOM.findDOMNode y react-dom/test-utils. Se recomienda migrar a las alternativas más modernas que se detallan en la guía de actualización de React 19.

Actualización y cambios que rompen la compatibilidad

La versión 19 de React trae consigo algunos cambios importantes que requieren adaptaciones en las aplicaciones existentes. A pesar de que han trabajado para que la actualización sea lo más fluida posible y en la mayoría de los casos no implicará casi cambios, también es importante tener en cuenta que hay algunas cosas que sí que podrían afectar a la compatibilidad de tus aplicaciones hechas con versiones anteriores.

Aunque la mayoría de las APIs de React que se han eliminado ya estaban obsoletas y no deberías utilizarlas, deberías saber cuáles son por si acaso. Las más importantes son propTypes y defaultProps para funciones, el contexto "legacy", las referencias de tipo string (que en su día se sustituyeron por callbacks de referencias y que ahora se han eliminado definitivamente), las fábricas de patrones de módulo, React.createFactory, react-test-renderer/shallow y varias APIs de ReactDOM como ReactDOM.render, ReactDOM.hydrate, unmountComponentAtNode y ReactDOM.findDOMNode.

Para facilitar la actualización, se han publicado codemods que ayudan a actualizar el código automáticamente. Los codemods están disponibles en el repositorio react-codemod. También se ha actualizado la documentación para reflejar estos cambios.

El equipo de React recomienda encarecidamente actualizar primero a React 18.3, ya que esta versión incluye advertencias sobre las APIs obsoletas y otros cambios necesarios para React 19, pero no rompe nada. Esto ayudará a identificar cualquier problema antes de realizar la actualización completa.

En general, aunque React 19 introduce cambios que pueden romper la compatibilidad, también ofrece herramientas y recursos para facilitar la actualización.

Dale un repaso a la guía de actualización oficial para ver la lista completa de los cambios y las instrucciones para actualizar las aplicaciones.

En resumen

React 19 marca un hito importante en la evolución de esta popular biblioteca de JavaScript, que va más allá de las nuevas características y de las mejoras técnicas. Esta versión representa un cambio filosófico en la forma en que Meta y el equipo de React abordan el desarrollo de cara al futuro. La introducción de las Acciones, por ejemplo, simplifica la gestión de estados y mutaciones de datos, permitiendo que nos centremos en la lógica de la aplicación en lugar de la complejidad de la gestión de estados. Los componentes de servidor, por otro lado, impulsan la arquitectura Full-stack de React, ofreciendo un nuevo nivel de rendimiento y escalabilidad al renderizar componentes de forma anticipada.

React 19 no solo facilita el desarrollo, sino que también lo hace más intuitivo. Las mejoras en la gestión de errores, la hidratación y la compatibilidad con tecnologías web modernas, como los elementos personalizados (custom elements), la forma de manejar las hojas de estilo y los scripts asíncronos, demuestran un compromiso por parte de los creadores de React de facilitarte el trabajo un poco más y de usar técnicas modernas.

En resumen, React 19 no es una revolución sino una evolución en la biblioteca más popular de desarrollo Front-End, y te facilita la adopción evitando que haya muchos problemas de compatibilidad, mirando al mismo tiempo hacia el futuro.

¡Espero que este resumen te haya resultado útil!

Preguntas frecuentes sobre React 19

¿Qué novedades trae React 19?

React 19 introduce una serie de nuevas características y mejoras. Entre las más destacadas se encuentran las "Acciones", que simplifican el manejo de mutaciones de datos y actualizaciones de estado, y los "Componentes de servidor", que permiten la renderización previa en un entorno separado. También se han mejorado aspectos como la compatibilidad con scripts y extensiones de terceros. Además, React 19 ofrece nuevas API para el manejo de metadatos de documentos, hojas de estilo, scripts asíncronos y la precarga de recursos.

¿Cómo puedo actualizar mi aplicación a React 19?

Para actualizar a React 19, se recomienda primero actualizar a React 18.3 para identificar posibles problemas antes de proceder a la versión 19. La guía de actualización oficial de React proporciona instrucciones paso a paso para actualizar la aplicación a React 19, incluyendo la instalación, el uso de codemods para automatizar ciertos cambios, y un resumen de las principales novedades, cambios importantes y deprecaciones.

¿Qué cambios importantes se han introducido en React 19?

React 19 introduce algunos cambios importantes que pueden requerir modificaciones en el código de la aplicación. Se han eliminado algunas API de React y React DOM que estaban obsoletas, como propTypes y defaultProps para funciones, Legacy Context, referencias de cadenas, y ReactDOM.render y ReactDOM.hydrate.

¿Qué son las "Acciones" en React 19?

Las "Acciones" son una nueva característica que simplifica el manejo de mutaciones de datos y actualizaciones de estado en las aplicaciones React. Permiten el uso de funciones asíncronas en transiciones para manejar automáticamente los estados pendientes, los errores, los formularios y las actualizaciones optimistas. React 19 introduce nuevos hooks como useTransition, useOptimistic y React.useActionState para facilitar el uso de Acciones.

¿Cómo funcionan los "Componentes de servidor" en React 19?

Los Componentes de servidor son una nueva opción que permite renderizar componentes de forma anticipada, antes del empaquetado, en un entorno separado de la aplicación del cliente o el servidor SSR. Esta característica permite un mejor rendimiento y una mejor experiencia del desarrollador.

¿Qué mejoras se han realizado en Strict Mode en React 19?

React 19 incluye varias correcciones y mejoras en Strict Mode. En el desarrollo, al realizar una doble renderización en Strict Mode, useMemo y useCallback reutilizarán los resultados memorizados de la primera renderización durante la segunda. Este comportamiento ayuda a detectar errores en los componentes durante el desarrollo.

¿Qué mejoras se han realizado en Suspense en React 19?

En React 19, cuando un componente se suspende, React confirmará inmediatamente el fallback del límite de Suspense más cercano sin esperar a que se renderice todo el árbol hermano. Después de que se confirma el fallback, React programa otra renderización para los hermanos suspendidos para "precalentar" las solicitudes perezosas en el resto del árbol.

¿Qué cambios se han realizado en TypeScript en React 19?

Se han realizado varios cambios en los tipos de TypeScript en React 19. Se han eliminado algunos tipos obsoletos, useRef ahora requiere un argumento y se han realizado mejoras en las tipificaciones de useReducer. Además, el espacio de nombres JSX en TypeScript se ha actualizado para evitar la contaminación de tipos globales.

¿Cómo se manejan los errores en React 19?

Se ha mejorado el manejo de errores en React 19 para eliminar la duplicación y proporcionar opciones para manejar los errores capturados y no capturados. Se han añadido dos nuevas opciones de raíz, onCaughtError y onUncaughtError, para complementar a onRecoverableError. Estas opciones permiten personalizar el manejo de errores en la aplicación.

¿Qué otras mejoras importantes se han introducido en React 19?

React 19 incluye otras mejoras importantes, como la compatibilidad total con elementos personalizados, mejoras en la generación de informes de errores de hidratación, soporte para metadatos de documentos, hojas de estilo, scripts asíncronos y precarga de recursos, y la capacidad de utilizar ref como un prop para los componentes de función.