Novedades Frontenders: React

4 de octubre de 2024

Podcast

Querida Tecnología… En este nuevo podcast, los expertos de Mimacom exploran las últimas novedades de React, la biblioteca JavaScript que sigue marcando el ritmo en el desarrollo front-end. En este artículo te dejamos algunas pinceladas para animarte a escuchar el episodio entero y descubrir qué hace a React tan popular, qué trae su versión 19, y qué podemos esperar en la próxima actualización.

¿Cuál es la situación actual del mercado?

En el mercado actual, React continúa consolidándose como la biblioteca de JavaScript más popular y dominante para el desarrollo front-end, superando ampliamente a competidores muy potentes y de mayor trayectoria. Según los datos de State of JS 2024 y la encuesta de Stack Overflow 2024, React es la opción preferida por más del 50% de los desarrolladores. Esta preferencia no solo se debe a su extensión, sino también a la fuerte comunidad de desarrolladores y el respaldo de grandes empresas como Meta, Netflix, Airbnb y Shopify, que la utilizan en sus propias plataformas.

Históricamente, React ha logrado un crecimiento acelerado, pasando de ser una opción innovadora a convertirse en el estándar del sector. Esto ha creado una “zona de confort” para los desarrolladores, que prefieren React no solo por su versatilidad, sino también por la estabilidad que ofrece en comparación con frameworks que lanzan actualizaciones más frecuentes y disruptivas. Esta popularidad y estabilidad han facilitado que las empresas apuesten por React en proyectos de gran envergadura, especialmente en aplicaciones SPA y en soluciones con altos requisitos de interacción de usuario.

Además, según la última ReactConf, se ha reportado que React ha alcanzado mil millones de descargas, y que un 37% de los nuevos desarrolladores desean aprenderlo, cifras que refuerzan su rol predominante en el sector. React Native, la extensión para desarrollo móvil, también está experimentando un auge con más de 78 millones de descargas anuales, lo que reafirma su importancia en múltiples plataformas.

Pros y contras de React: ¿Por qué las empresas siguen eligiéndolo?

El éxito de React se debe a varios factores clave:

Estabilidad y madurez: React es extremadamente estable, con un roadmap planificado y enfocado en mejoras progresivas sin cambios drásticos. Desde el lanzamiento de React 18 en 2022, se ha enfatizado en optimizar las capacidades internas, como la renderización concurrente y la API startTransition, que mejora la actualización de estado de forma más eficiente.
Curva de aprendizaje accesible: La adopción de React se ha facilitado a través de mejoras en la documentación y de un enfoque en la simplificación de los conceptos. Este enfoque ha reducido la curva de aprendizaje y ha permitido a los desarrolladores ser productivos rápidamente, contribuyendo a su popularidad.
Flexibilidad en la estructura: A diferencia de frameworks más estructurados, React se define como una librería, permitiendo una mayor personalización y la posibilidad de adoptar herramientas adicionales según las necesidades del proyecto, como Redux para la gestión de estado o React Hook Form para formularios. Esta flexibilidad es una ventaja para desarrolladores que buscan autonomía en la configuración de sus proyectos.

Sin embargo, React tiene algunas limitaciones que las empresas deben considerar:

Inconsistencia en el stack: La flexibilidad de React puede hacer que el stack de herramientas varíe significativamente entre proyectos, lo que puede dificultar la transición de un equipo de un proyecto a otro. Aunque React intenta estandarizar algunas prácticas en su documentación, la diversidad de enfoques puede ser confusa para nuevos integrantes de un equipo.
SEO y optimización en Single Page Applications (SPA): Aunque las mejoras en SEO nativo son significativas en la versión 19, los proyectos React aún suelen depender de soluciones adicionales como Next.js para optimizar el SEO. Las herramientas de SEO incluidas en React aún deben madurar para competir directamente con el rendimiento y la facilidad de indexación que ofrecen frameworks de SSR (Server-Side Rendering).

Novedades de React 19

React 19 introduce cambios significativos para optimizar la experiencia del desarrollador y la eficiencia de las aplicaciones. Entre sus características principales destacan:

React Compiler: El nuevo compilador promete reducir la necesidad de hooks como useCallback y useMemo, ya que automatiza la detección de cambios en los componentes y optimiza el renderizado. Esto representa una mejora significativa, pues evita renderizaciones innecesarias y reduce el esfuerzo manual que los desarrolladores debían realizar en versiones anteriores para optimizar el rendimiento.
Nuevos Hooks para Formularios y Optimistic UI: Se introducen hooks como useOptimistic, que permite a los desarrolladores implementar cambios “optimistas” en la interfaz de usuario antes de recibir una respuesta del servidor. Esto mejora la experiencia de usuario en aplicaciones donde la inmediatez es importante, como redes sociales o aplicaciones con botones de "me gusta". Además, los hooks useActionState y useFormStatus simplifican la gestión de formularios, mejorando la experiencia al centralizar y facilitar el manejo del estado del formulario.
Compatibilidad total con Web Components: React 19 logra una compatibilidad del 100% con Web Components, una característica muy esperada. Esto facilita la integración de React en proyectos de Design Systems, donde los Web Components permiten una reutilización y escalabilidad significativas, especialmente en entornos con equipos y tecnologías diversificadas.
Mejoras en SEO: React ahora permite modificar etiquetas head de manera más intuitiva sin dependencias externas como React Helmet, optimizando los metadatos en cada ruta específica. Esto es una gran ventaja para quienes buscan maximizar el rendimiento en motores de búsqueda sin depender de frameworks adicionales para el SEO.
Codemod para migraciones: Junto al equipo de Codemod, React ha desarrollado una herramienta para facilitar la migración entre versiones, especialmente útil para actualizar código de versiones antiguas a la nueva versión 19. Esta herramienta automatiza ajustes comunes, como la migración de propTypes a TypeScript, proporcionando una solución eficiente para grandes proyectos.

Reflexión final: ¿Qué esperar de React 20?

React 19 plantea avances significativos, pero hay una expectativa general de que React 20 marcará un antes y un después en la librería, posiblemente introduciendo breaking changes que faciliten una depuración y simplificación profunda del código base de React. Con la alta probabilidad de deprecar componentes de clase y hooks obsoletos, React 20 podría ser la actualización que obligue a las empresas a ponerse al día y adaptar sus aplicaciones a un stack moderno.

¿Te has quedado con ganas de más? Escucha el podcast en tu plataforma favorita y descubre las opiniones y experiencias más sinceras de la mano de los expertos de Mimacom. ¡Sumérgete en las novedades de React y en cómo estas transforman el desarrollo front-end!