Table of Contents
React 18 ha sido finalmente lanzado después de haber estado en boca de todos desde 2021. React 18 trae nuevas e interesantes características para mejorar el rendimiento y la experiencia del usuario. El énfasis principal de esta versión ha sido la introducción del modo concurrente, nuevos hooks y mejoras en la API de modo estricto de React.
La información de este artículo está organizada en base a la tabla presentada por Shruti Kapoor en la conferencia Reactathon 2022. Cubrirá tres características clave de React 18: procesamiento por lotes automático, transición y suspenso en el servidor. También abordará el concepto de concurrencia y las nuevas API introducidas en React DOM Client y Server. Por último, también introducirá los nuevos hooks disponibles en React 18, incluyendo useId y useTransition.
Características
Con la nueva versión de React, tenemos acceso a funciones como el procesamiento automático por lotes, que combina varias actualizaciones de estado en un único re renderizado, la transición, que distingue entre actualizaciones urgentes y no urgentes, y el suspenso en el servidor, que mejora el rendimiento incluso para componentes renderizados lentamente.
Procesamiento automático por lotes: optimización del rendimiento gracias a una mínima repetición de la renderización
Shruti Kapoor utiliza el ejemplo de la compra en el supermercado para ilustrar el concepto de «dosificación automática» en React. Esto significa hacer una lista de todos los artículos que necesitas para cocinar y conseguirlos todos en un solo viaje a la tienda de comestibles, en lugar de hacer varios viajes. En React, el batching se refiere a reducir el número de re-renders (viajes) que se producen cuando cambian múltiples estados.
Anteriormente, las actualizaciones de estado que se producían fuera de los controladores de eventos, como las llamadas a la API o las promesas, no se procesaban por lotes. Pero con React 18, todas las actualizaciones de estado pueden ser automáticamente batched, incluyendo dentro de las promesas, setTimeouts, y callbacks de eventos. Esto se traduce en una reducción significativa de la cantidad de trabajo que React tiene que realizar en segundo plano.
La dosificación automática sólo está disponible si utilizas createRoot en lugar del método render al montar tu aplicación. Si prefieres no utilizar la dosificación automática, puedes desactivarla utilizando flushSync.
Transición – Mejora de la experiencia del usuario con carga retardada
React tiene un nuevo concepto llamado «transición» que distingue entre actualizaciones urgentes y no urgentes. Las actualizaciones de transición cambian la IU cuando un usuario pasa de una vista a otra de forma no urgente, mientras que las actualizaciones urgentes son respuestas instantáneas a la interacción directa del usuario (hacer clic, escribir, etc.).
El hook useTransition o el método startTransition inician la transición y se consideran actualizaciones de baja prioridad. Se interrumpirán si se producen actualizaciones más urgentes, como hacer clic o pulsar teclas. En caso de que el usuario interrumpa la transición, por ejemplo tecleando varios caracteres en rápida sucesión, React sólo renderizará la actualización más reciente y anulará cualquier trabajo de renderizado previo que no se haya completado.
Las transiciones pueden utilizarse en situaciones en las que la renderización es lenta o la red es lenta. En el caso de una renderización lenta, React realiza una cantidad significativa de trabajo, y marcar las actualizaciones como transiciones puede ayudar a optimizar el proceso. En el caso de una red lenta, React puede esperar datos de la red sin congelar la UI, mejorando la experiencia del usuario.
Suspense en el servidor – Aprovechamiento de Suspense para la carga de datos en el servidor
React 18 introduce «suspense en el servidor», que mejora el rendimiento y la experiencia del usuario en la renderización del lado del servidor. La división del código con suspense, que permite a los desarrolladores dividir sus componentes en piezas más pequeñas y cargarlas de forma independiente, permite tiempos de carga inicial más rápidos y un menor uso de recursos tanto en el servidor como en el cliente. Renderizado en streaming en el servidor, que envía el HTML inicial al cliente en cuanto está disponible, en lugar de esperar a que termine de renderizarse toda la página. El resultado es una experiencia de usuario más rápida y fluida, ya que los usuarios ven antes el contenido inicial de la página.
En React 18, Suspense para la obtención de datos puede ser utilizado por frameworks como Relay, Next.js, Hydrogen o Remix. Sin embargo, actualmente no se recomienda el uso de Suspense para la obtención de datos sin frameworks. Aunque React está explorando la posibilidad de proporcionar más herramientas en el futuro para acceder a los datos con Suspense, se cree que las bibliotecas y los frameworks seguirán desempeñando un papel importante.
Concepto
Concurrencia: optimizar el rendimiento y la experiencia del usuario
«React concurrente», un nuevo mecanismo que permite preparar varias versiones de la interfaz de usuario al mismo tiempo. La concurrencia no es una función en sí, sino un detalle de implementación entre bastidores que permite nuevas funciones (como Suspense y las nuevas API startTransition() y useDeferredValue(), etc.).
Antes de React 18, las transacciones de renderizado eran siempre únicas, ininterrumpidas y síncronas, lo que hacía imposible interrumpir el proceso. Con esta nueva característica, React puede pausar, reanudar, interrumpir o incluso abandonar un render si es necesario. Eso es concurrencia; si una tarea es larga, se puede pausar, cambiar a otra, completarla y luego continuar. Esto permite una experiencia más receptiva para el usuario, incluso cuando React está en medio de una compleja tarea de renderizado.
APIs
Cliente DOM de React
Se han introducido las siguientes API nuevas en react-dom/client:
createRoot
Un nuevo método para crear una raíz para renderizar o desmontar. Debe usarse en lugar de ReactDOM.render y habilita características concurrentes de React 18.
hydrateRoot
Este es un nuevo método para hidratar una aplicación renderizada en servidor. Debe utilizarse junto con las nuevas API de servidor DOM de React en lugar de ReactDOM.hydrate.
Servidor DOM React
La API renderToPipeableStream está diseñada específicamente para su uso en entornos Node, mientras que la API renderToReadableStream está optimizada para entornos de ejecución edge modernos como Deno y Cloudflare Workers. El método tradicional renderToString sigue siendo funcional, pero se desaconseja su uso.
Hooks
useId
UseId es un nuevo hook que genera IDs únicos en el cliente y el servidor, al tiempo que evita la necesidad de gestionar manualmente los valores de ID y garantiza la coherencia entre los renders.
useTransition
Los hooks useTransition y startTransition de React 18 clasifican las actualizaciones de estado en dos categorías: urgentes y no urgentes. Por defecto, las actualizaciones de estado se consideran urgentes, pero estos hooks permiten marcar ciertas actualizaciones de estado como no urgentes. Esto significa que React priorizará y permitirá que las actualizaciones importantes, como la actualización de una entrada de texto, interrumpan a las no urgentes, como la representación de una lista de resultados de búsqueda.
useDeferredValue
El hook useDeferredValue permite retrasar el re renderizado de un componente no crítico. A diferencia de debouncing o throttling, no hay un retardo de tiempo establecido, lo que significa que React intentará la renderización diferida inmediatamente después de que aparezca la primera renderización en la pantalla.
Conclusión
En conclusión, React v18 trae un montón de mejoras interesantes para mejorar el rendimiento y la experiencia del usuario. Con la introducción del modo concurrente, el concepto de concurrencia ha permitido que React sea más receptivo y fácil de usar. Además, el procesamiento por lotes automático, la transición y el suspenso en el servidor son características clave que permiten a React optimizar el rendimiento y también permiten la preparación de múltiples versiones de la interfaz de usuario al mismo tiempo, habilitando nuevas características como Suspense y nuevas API. Con la introducción de React 18, los desarrolladores pueden beneficiarse de un renderizado más rápido, un rendimiento optimizado y experiencias de usuario mejoradas.
¿Te ha resultado útil este artículo? Si es así, puedes echar un vistazo al blog de Apiumhub para estar al día de las últimas tendencias en desarrollo de software. Todas las semanas se publican contenidos nuevos e interesantes.
