React 18 y todas sus nuevas funciones

React 18 viene cargado de muchas novedades.

Se está probando un nuevo enfoque de React 18. El equipo de React 18 ha invitado a un panel de expertos, desarrolladores, autores de bibliotecas y educadores a participar en un grupo de trabajo. Esta nueva versión se centrará en mejoras de rendimiento, nuevas funciones concurrentes y mejoras en el área de renderización del lado del servidor. Esta versión se encuentra en una etapa inicial. El equipo de React 18 está recopilando la mayor información de los expertos. Por eso han sacado las primeras versiones alfa.

Cuando sea publicado, React 18 incluirá mejoras listas para usar (como procesamiento por lotes automático), nuevos APIs como startTransition. También una nueva transmisión para el renderizado en el servidor con soporte incorporado para React.lazy. Todas estas características son posibles gracias a un nuevo mecanismo de suscripción en React 18. Se llama renderizado concurrente y posibilita preparar múltiples versiones de la interfaz de usuario al mismo tiempo. En lugar de un “modo” de todo o nada, el renderizado concurrente solo se habilitará para las actualizaciones activadas por una de las nuevas funciones. En la práctica, significa que podrá adoptar React 18 sin reescribir y probar las nuevas funciones a su propio ritmo. Esto posibilita mejorar el rendimiento real de su aplicación. 

Nuevas características de React 18

Modo estricto 

El modo estricto tiene algunas novedades, como un nuevo comportamiento llamado «efectos estrictos» . Esto nos permite ejecutar efectos como mounty/unmount. Crea un entorno para corregir el comportamiento con Fast Refresh durante el desarrollo, no solo buscando componentes más resistentes. También hay una ‘API fuera de la pantalla’ que se está desarrollando actualmente.

Esta API fuera de la pantalla permitirá un mejor rendimiento, ocultando componentes en lugar de desmontarlos, manteniendo el estado.

Procesamiento automático por lotes 

El procesamiento por lotes es cuando React agrupa varias actualizaciones de estado en una sola repetición para un mejor rendimiento. Cuando tenemos aplicaciones enormes sin procesamiento por lotes, es posible que encontremos muchas repeticiones de renderizado de la página debido a múltiples cambios de estado. Esto puede dar lugar a algunos errores no deseados, lo que da lugar a una mala experiencia de usuario. Todo esto cambia con React 18, que generará actualizaciones de estado por lotes sin límites, siempre que sea seguro hacerlo. 

Renderizado del lado del servidor para Suspense

Suspense no es una biblioteca para la carga de datos. Es un mecanismo para que las bibliotecas de carga de datos le comuniquen a React que los datos que un componente está leyendo aún no están listos. React puede esperar a que estén listos y actualizar la interfaz de usuario. Con esta nueva característica, el usuario también puede interactuar con los componentes que se representan, en lugar de esperar a que se cargue todo el paquete.

Nuevas API 

Con React 18, obtenemos varias API nuevas que vienen en muchas formas.

startTransition: Esta nueva característica nos permite decirle a React qué actualizaciones son urgentes y cuáles no, lo que esencialmente ayuda a priorizar las actualizaciones. Antes de React 18, todas las actualizaciones se consideraban urgentes.

useDeferredValue: Este gancho le dará un elemento diferido del valor pasado, que seguirá al original, hasta el tiempo de espera proporcionado.

SuspenseList: Este componente está destinado a manejar casos en los que, por ejemplo, los datos obtenidos pueden llegar en un orden impredecible. Gracias a <SuspenseList>, se puede orquestar un componente y mantendrá la interfaz de usuario bajo control.