Damián De Luca - Capacitación & Desarrollo Web

Novedades de React 19

reactjs
React 19

React se mantiene en el podio de las librerías de JavaScript más utilizadas de la actualidad. Su popularidad y versatilidad hacen que los desarrolladores que tienen experiencia en esta tecnología puedan encontrar variada oferta laboral. Esto hace que sea una de las herramientas más elegidas por miles de profesionales en todo el mundo, tanto para desarrollo independiente, como para buscar oportunidades de trabajo.

Si nos focalizamos en la evolución de esta librería podemos apreciar que el recorrido es extenso. En mis capacitaciones destaco que React es una librería que lleva más de una década en el mundo del desarrollo y que desde hace muchos años ha logrado posicionarse como una de las más elegidas para crear proyectos modernos.

En mis clases suelo hacer una breve reseña sobre las versiones de React para comprender en que momento nos encontramos. Sin necesidad de ir hasta el origen, podemos arrancar con React 16, que es una versión que logró gran popularidad desde su arribo en 2017. Pasados unos años, en 2020 se produce el arribo de React 17. Y es en 2022 cuando llega la versión 18 de React, que ha recibido varias revisiones y que también ha logrado subir en popularidad durante su ciclo de vida.

La llegada de React 19

En 2024, con la publicación de la versión 19 (Beta), encontramos muy interesantes novedades y un paso adelante necesario en la evolución del producto.

Focalizados en las nuevas características, podremos destacar a las acciones como una de las mejoras que nos resultarán más útiles. ¿De qué se trata? Con esta característica podremos manejar la mutación de datos de una manera eficientes, tendremos control del estado de actualización y también podremos trabajar con los errores que ocurren en formularios.

La incorporación de useActionState encontraremos una herramienta poderosa que facilitará los usos comunes que encontremos para las acciones. Podremos encontrar más información sobre este Hook en el siguiente enlace: https://react.dev/reference/react/useActionState.

Las aplicaciones React suelen realizar mutación de datos y, posteriormente, actualizar el estado en la respuesta. Los resultados de las operaciones asíncronas siempre suelen ser un tema en estos casos. Antes de la incorporación de las nuevas características de React 19 solía ocurrir en los formularios, por ejemplo si hay conexión con una API, que era necesario un manejo de estados pendientes. La nueva opción de «actualizaciones optimistas» (con useOptimistic) ayuda a un flujo más rápido para los casos en los que la respuestas asíncronas sean exitosas.

La utilización de metadatos y hojas de estilo dinámicas también llega con novedades en React 19. Ahora podremos trabajar de manera renovada con estas características, tendremos mayor control en la representación y en la carga de componentes.

Otro de los nuevos Hooks es useFormStatus. Como su nombre lo indica, este mecanismo nos será de gran utilidad para trabajar con formularios. Su inclusión tiene como finalidad la posibilidad de obtener información del estado del envío del último formulario. Con useFormStatus podremos tener mayor control de los mensajes de estado destinados al usuario final. Algunos ejemplos podrían ser: «Se está enviando el formulario» o «Formulario enviado con éxito».

Es importante destacar que useFormStatus incluye la propiedad data. Esta propiedad tiene los datos que el usuario envía dentro del formulario. Con esto resulta posible acceder a los datos del formulario sin necesidad de manejar el estado del formulario de manera manual.

React 19 también trae novedades en lo relacionado a componentes del lado servidor (Server Components). En este sentido, se busca optimizar el rendimiento, mejorar la experiencia del usuario y ampliar la flexibilidad de los Server Components respecto a lo que se había introducido de manera experimental a partir de React 18. Algunas de las claves para lograr estas mejoras están directamente vinculadas con el renderizado por lotes para bajar la latencia, la hidratación progresiva, el soporte para useContext y integración con useEffect.

Cómo obtener React 19

La versión Beta de React 19 fue lanzada el 25 de Abril de 2024 y en siguiente enlace podremos leer más información y conocer los pasos para obtener esta versión si deseamos probarla: https://react.dev/blog/2024/04/25/react-19.

Siempre me parece importante destacar que las versiones Beta de una librería o framework suelen ser interesantes para probar, aprender y evaluar sus características y no resulta recomendable emplearlas en proyectos destinados a producción.

Para finalizar es importante comprender que las nuevas características de React 19 son muchas y muy interesantes. Espero que esta reseña sea de utilidad para quienes están pensando actualizar sus proyectos o comenzar uno nuevo con esta versión.

Salir de la versión móvil