Novedades de React 19: ¿Qué podemos esperar en esta nueva versión?

John SerranoJohn Serrano
6 abril - 2024
React

React 19 está por llegar, ¿qué hay de nuevo? 🚩

React 19 será otro lanzamiento histórico después de la introducción de los hooks. La última vez que React lanzó una versión fue el 14 de junio de 2022, siendo el número de versión 18.2.0. Es algo curioso que tenga tanto tiempo sin recibir una actualización para una tecnología tan popular como React.

Finalmente ha llegado la noticia de la tan esperada nueva versión de React, algo que la comunidad había estado solicitando durante mucho tiempo y que ha generado cierto descontento entre sus miembros. 🤨

El equipo de React ha confirmado que la próxima versión será una versión major, siendo el número de versión 19.0.0. Nuevas funciones que podrían lanzarse oficialmente en la versión 19. 🚀

Automatic Memoization

Es un compilador que ya ha sido implementado en el entorno de producción de Instagram. El equipo de React tiene planes de extender su uso a más plataformas dentro de Meta y eventualmente lo convertirá en un proyecto de código abierto.

Con este nuevo compilador ya le podemos decir adiós a los hooks useMemo, useCallback los cuales nos permitían memorizar o almacenar en caché manualmente los estados para reducir las reproducciones innecesarias (re-renders). Después de años de esfuerzo, el nuevo compilador ha llegado con éxito.

Actions

React Actions desarrollado como parte de la exploración de soluciones por parte del equipo de React para enviar datos desde el cliente al servidor. Esta característica permite a los desarrolladores pasar una función a los elementos del DOM (como <form/>).

<form action={sendMessage}>
  <input name="message" />
  <button type="submit">Send message</button>
</form>

La action function puede ser sincrónica o asincrónica. Al utilizar acciones, React gestiona el ciclo de vida del envío de datos para el desarrollador. Podemos acceder al estado actual y la respuesta de las operaciones de formulario a través de los hooks useFormStatus y useFormState.

Las actions se pueden utilizar en escenarios de interacción cliente-servidor, como solicitar cambios en la base de datos (agregar, eliminar, actualizar datos) e implementar formularios (como formularios de inicio de sesión, formularios de registro).

Además de combinarse con useFormStatus y useFormState, las actions también se pueden usar con useOptimistic y use server.

Directivas: use client y use server

Las directivas use client y use server han estado disponibles en la versión Canary por un tiempo y finalmente se unen a la versión Stable en v19. Las dos directivas mencionadas ya son utilizadas por distintos frameworks de React y están principalmente diseñadas para ser usadas en frameworks como Next.js y Remix.

Otras actualizaciones

Andrew Clark, miembro del equipo de React, también reveló que habría los siguientes cambios en 2024:

  • ✅ forwardRef → ref es un prop: Simplificar la forma en que se hacen las referencias a elementos o componentes internos en un componente secundario al tratar ref como un prop normal.
  • ✅ React.lazy → RSC, promesa como hijo: capacidades mejoradas de división de código y carga diferida.
  • ✅ useContext → use(Context): Ofreciendo una nueva forma de acceder a Context.
  • ✅ throw promise → use(promise): Mejora del manejo de la carga de datos asincrónica.
  • ✅ <Context.Provider> → : Simplificando el uso de proveedores de contexto. Sin embargo, el sitio web oficial de React aún no ha proporcionado información detallada sobre estas posibles actualizaciones.

Conclusiones

En mi opinión, la próxima actualización de React promete ser una mejora significativa que fortalecerá aún más el ecosistema de React. Estoy emocionado por las nuevas características que se han pedido durante mucho tiempo y creo que estas mejoras contribuirán en gran medida a facilitar el desarrollo web.

Esperemos que estas actualizaciones lleguen pronto y que React continúe creciendo para ofrecer aún más beneficios a la comunidad de desarrolladores.

Gracias por tomarte el tiempo de leer. Si disfrutaste del contenido, te invito a seguirme en mis redes sociales, donde comparto contenido regularmente. ¡Saludos y hasta la próxima! 🔥

🔵 Facebook 🟠 Instagram 🔴 YouTube

Soy John Serrano ingeniero de software con más de 7 años de experiencia. Me especializo en la creación de experiencias digitales de alto impacto. Entusiasta de las tecnologías web: JavaScript, TypeScript, Node.js, Docker, Firebase, React, etc. Me puedes encontrar en las siguientes redes sociales:

Apoyo

Estoy muy feliz de que disfrutes del contenido de johnserrano.co, si te gusta lo que lees y quieres respaldar mi trabajo, puedes realizar una donación a través de Tarjeta de crédito o PSE. Además, estoy disponible para recibir tu apoyo por correo electrónico en [email protected] si prefieres otras opciones. Tu apoyo ayuda a mantener este proyecto en marcha. ¡Gracias por tu apoyo!

Apoyo no monetario

Otra manera de ayudarme es difundiéndolo de boca en boca! Si consideras que el contenido que comparto en johnserrano.co puede ser valioso para tus amig@s y compañer@s, te invito a compartirlo en Twitter, LinkedIn o en la plataforma que prefieras. Tu recomendación puede marcar la diferencia. ✨

No hay un amor más grande que el dar la vida por los amigos. Juan 15:13

Otros artículos

TypeScript, Types vs interfaces

TypeScript, Types vs interfaces

Cuando se trata de TypeScript, hay dos formas de definir tipos: 'types' e 'interfaces'. Vamos a explorar las diferencias y similitudes entre tipos e interfaces, así como cuándo es apropiado usar cada uno.