El tan esperado React v18 finalmente se lanzó hace unos meses. Aunque no hubo cambios importantes, se agregaron algunas características interesantes que vale la pena echarle un vistazo. Este artículo repasa algunas adiciones nuevas y cómo actualizar a React v18.

Cómo actualizar a React 18

Para instalar la última versión de React, ejecute este comando en una terminal:

npm Instalar en pc reaccionar reaccionar-dom

O si estás usando hilo:

añadir hilo reaccionar reaccionar-dom

Una vez que haya instalado la última versión, puede comenzar a aprovechar sus nuevas funciones.

Hay varias adiciones en React 18; aquí hay cuatro de los más notables.

1. Modo estricto

StrictMode es una característica que puede usar para resaltar problemas potenciales en una aplicación. Las comprobaciones de modo estricto se ejecutan solo en modo de desarrollo y no afectarán a la compilación de producción. Sin embargo, pueden ser muy útiles para identificar posibles problemas en su código.

Puede habilitar el modo estricto para cualquier parte de su aplicación. Por ejemplo, podría habilitarlo para todos sus componentes, o solo para algunos de ellos.

instagram viewer 

importar Reaccionar de 'reaccionar';
funciónDemostraciónEjemplo() {
devolver (
<división>
<Primer componente />
<Reaccionar. Modo estricto>
<Segundo componente />
<Tercer componente />
</React.StrictMode>
<Cuarto componente />
</div>
 );
}

En el código anterior, los cuatro componentes se verificarían en busca de posibles problemas. Sin embargo, las verificaciones de modo estricto solo se aplicarán al y .

StrictMode también ayuda de otras maneras, como:

  • Identificación de componentes con ciclos de vida inseguros: Si un componente tiene un método de ciclo de vida que está marcado como inseguro, el modo estricto le avisará al respecto.
  • Advertencia sobre el uso de la API de referencia de cadena heredada: Si está utilizando la API de referencia de cadena heredada, el modo estricto le advertirá sobre su uso.
  • Advertencia sobre el uso obsoleto de findDOMNode: Si está utilizando la API findDOMNode en desuso, el modo estricto le advertirá al respecto.
  • Detección de efectos secundarios inesperados: Si un componente desencadena efectos secundarios (como setState) en lugares inesperados, el modo estricto le advertirá al respecto.
  • Detección de la API de contexto heredada: Si está utilizando la API de contexto heredada (que ahora está obsoleta), el modo estricto le advertirá al respecto.
  • Garantizar el estado reutilizable: Si tiene un estado que utilizan varios componentes, el modo estricto ayudará a garantizar que esté correctamente sincronizado.

En general, el modo estricto puede ser una característica útil en el desarrollo para ayudar a identificar problemas potenciales en su código.

2. Transiciones

Las transiciones le permiten marcar ciertas actualizaciones de la interfaz de usuario como no urgentes. Esto significa que React puede priorizar otras actualizaciones que son más importantes.

Por ejemplo, si tiene dos campos de texto, uno para una consulta de búsqueda y otro para sus resultados, querrá marcar el campo de texto de resultados de búsqueda como una transición. De esa manera, React sabe que no necesita volver a mostrar ese campo de texto con urgencia cada vez que el usuario escribe algo en el campo de texto de la consulta de búsqueda.

Puede usar la función startTransition para marcar una actualización de la interfaz de usuario como una transición. Aquí hay un ejemplo:

importar { iniciarTransición } de 'reaccionar';
iniciarTransición(() => {
// Marque cualquier actualización de estado no urgente dentro como transiciones
});

Este código marcaría todas las actualizaciones de estado dentro de la función startTransition como transiciones. De esa manera, React puede concentrarse en otras actualizaciones de interfaz de usuario más importantes.

3. Dosificación automática

React proporciona una función útil llamada procesamiento por lotes que reduce la cantidad de renderizaciones que tienen lugar cuando cambia un estado. Esto puede ser muy útil para optimizar el rendimiento, especialmente cuando trabajar con código asíncrono.

Anteriormente, si tenía una promesa o estaba haciendo una llamada de red, las actualizaciones de estado no se agrupaban y React tenía que volver a renderizar varias veces. Sin embargo, con el procesamiento por lotes automático en React 18, todas las actualizaciones de estado se procesan por lotes, incluso dentro de promesas, establecer tiempos de espera y devoluciones de llamadas de eventos. Esto reduce significativamente el trabajo que React tiene que hacer en segundo plano.

Puede realizar actualizaciones de estado por lotes manualmente mediante la función flushSync, pero a partir de React 18, este proceso ahora es automático. Esto da como resultado un rendimiento mucho mejor, ya que React esperará a que finalice una microtarea antes de volver a renderizar.

4. Nuevos ganchos

La versión 18 introduce muchas novedades Ganchos de reacción, incluidos useId, useTransition y useDeferredValue. Estos nuevos Hooks brindan una excelente manera de agregar funcionalidad adicional a sus aplicaciones React con un mínimo esfuerzo.

React 18 ofrece un mayor rendimiento de la aplicación

React 18 ya está aquí y trae consigo grandes mejoras en el rendimiento de las aplicaciones web. Con la nueva versión de React, puede crear fácilmente aplicaciones web que respondan mejor y funcionen mejor en general. Entonces, si está buscando crear una aplicación web que funcione sin problemas y se vea genial, asegúrese de revisar React 18.