Rendimiento y depuración con el modo React Strict: guía

A lo largo de los años, ReactJS ha sufrido muchos cambios, introduciendo nuevas funciones y descontinuando las antiguas. Al momento de escribir este artículo, la versión actual de React es 18.2.0.

Algunas características nuevas importantes que se introdujeron en React desde la versión 16 a la 18 son: -

• React Fiber Architecture Rewrite : se realiza una reescritura completa del algoritmo central de React, lo que mejora el rendimiento y también permite nuevas características como renderizado asincrónico y umbrales de error.
• Se agregó una nueva API de contexto : se agregó una nueva API para pasar datos a través del árbol de componentes sin tener que pasar accesorios manualmente
• Introducción a los umbrales de error: se introduce una nueva característica que le permite manejar con elegancia los errores en sus componentes.
• Cambios en el ciclo de vida de React : varios métodos del ciclo de vida han quedado obsoletos en favor de nuevos métodos como componenteWillMount -> UNSAFE_componentWillMount
• Introducción a los ganchos de React : se introduce una nueva forma de escribir lógica con estado en componentes funcionales que facilita la reutilización y las pruebas del código.
• Adición del modo React Strict: se ha introducido una nueva característica llamada "modo estricto" que ayuda a identificar patrones obsoletos en su código y también proporciona comentarios sin afectar la compilación de producción.
• Se agregó renderizado del lado del servidor (SSR): se agregó una nueva característica que permite a React renderizar el lado del servidor para mejorar el rendimiento y el SEO.
• Introducción de nuevas funciones como Suspense, Concurrency, Automatic Batching, etc.

El "Modo estricto de React" es un tipo de función de depuración pasiva introducida en 2018 en la versión 16.3 de React para ayudarlo a escribir un mejor código de React.

En este artículo discutiremos la necesidad del 'Modo Reaccionar Estricto'; qué tan diferente es el 'Modo React Strict' de las técnicas de depuración y manejo de excepciones; características y beneficios de usar el 'Modo estricto de React' en sus proyectos de software React.

Introducción

El 'Modo estricto' en React ayuda a los desarrolladores a cumplir con las últimas prácticas de codificación al identificar patrones obsoletos y brindar comentarios durante el desarrollo.

Al utilizar el 'Modo estricto de reacción', puede detectar problemas potenciales en las primeras etapas del proceso de desarrollo realizando comprobaciones y advertencias adicionales que no se realizan en la versión de producción.

'React Strict Mode' destaca el uso de métodos de ciclo de vida inseguros, identifica efectos secundarios y detecta errores y advertencias que pueden pasar desapercibidos durante el desarrollo.

Además, el 'Modo React Strict' fomenta el uso de patrones recomendados y mejores prácticas, lo que genera un código más limpio y fácil de mantener.

El 'Modo estricto de React' le ayuda a escribir mejor código de React al detectar algunos de los problemas que se mencionan a continuación: –

• Detección de métodos de ciclo de vida inseguros: React Strict Mode destaca el uso de métodos de ciclo de vida inseguros, como componenteWillMount y componenteWillUpdate, que son propensos a causar errores y están obsoletos en versiones más recientes de React.
• Identificación de efectos secundarios: React Strict Mode advierte sobre componentes que introducen efectos secundarios fuera del renderizado, como modificar variables globales o manipular directamente el DOM.
• Resaltar problemas de tipos de accesorios: React Strict Mode ayuda a detectar problemas potenciales con los tipos de accesorios, como cuando a un componente se le asigna un tipo de datos incorrecto para un accesorio.
• Detección de errores y advertencias: el modo React Strict permite comprobaciones adicionales que ayudan a detectar errores y advertencias que, de otro modo, podrían pasar desapercibidas durante el desarrollo.
• Fomente las mejores prácticas: el uso del modo React Strict lo alienta a adoptar las mejores prácticas y seguir los estándares recomendados, lo que genera un código más limpio y fácil de mantener.

Por lo tanto, al resaltar los problemas anteriores y las advertencias sobre prácticas de código obsoletas, el 'Modo estricto de React' lo ayuda a identificar y solucionar problemas potenciales en una etapa más temprana del ciclo de desarrollo, lo que le permite escribir código React más estable y de mayor calidad.

Veamos un ejemplo de cómo utilizar el 'React Strict Mode'.

Ejemplo

Supongamos que tenemos un componente React simple que representa un botón y un contador: –

 importar React, {useState} de 'react';

 función Contador {
 const (recuento, setCount) = useState(0);

 const handleClick = => {
  setCount(cuenta + 1);
 };

 devolver (
  <div>
   < botón onClick={handleClick}>Haz clic en mí</ botón >
   < p >Recuento: {recuento}</ p >
  </div>
 );
 }
 
exportar contador predeterminado;

Para usar el "Modo Reaccionar estricto", simplemente podemos agrupar el componente en un componente :-

 importar React, {useState} de 'react';

 función Contador {
 const (recuento, setCount) = useState(0);

 const handleClick = => {
  setCount(cuenta + 1);
 };

 devolver (
  < Reaccionar.Modo estricto >
   <div>
    < botón onClick={handleClick}>Haz clic en mí</ botón >
    < p >Recuento: {recuento}</ p >
   </div>
  </ React.StrictMode >
 );
 }

 exportar contador predeterminado;

Ahora supongamos que queremos usar la variable de estado de recuento en un gancho useEffect para realizar un efecto secundario cuando se monta el componente. Podemos modificar el componente de la siguiente manera: –

 importar React, {useState, useEffect} de 'react';

 función Contador {
 const (recuento, setCount) = useState(0);

 const handleClick = => {
  setCount(cuenta + 1);
 };

 utilizarEfecto( => { 
console.log(`Componente montado con recuento: ${count}`);
 }, (contar));

 devolver (
 < Reaccionar.Modo estricto >
 <div>
 < botón onClick={handleClick}>Haz clic en mí</ botón >
 < p >Recuento: {recuento}</ p >
 </div>
 </ React.StrictMode >
 );
 }

 exportar contador predeterminado;

Cuando guardamos y recargamos el componente en el navegador, deberíamos ver una advertencia en la consola que dice: –

 Advertencia: no se puede realizar una actualización del estado de React en un componente desmontado. Esta no es una operación, pero indica una pérdida de memoria en su aplicación. Para solucionarlo, cancele todas las suscripciones y tareas asincrónicas en el método componenteWillUnmount.

Esta advertencia se produce porque estamos realizando una actualización de estado durante una fase de renderizado. Para solucionar este problema, simplemente podemos mover la instrucción console.log a una función separada y llamarla en el gancho useEffect:

 importar React, {useState, useEffect} de 'react';
 
función Contador {
 const (recuento, setCount) = useState(0);

 const handleClick = => {
 setCount(cuenta + 1);
 };

 const logCount = => {
 console.log(`Componente montado con recuento: ${count}`);
 };

 utilizarEfecto( => {
 logCount;
 }, );

 devolver (
 < Reaccionar.Modo estricto >
 <div>
 < botón onClick={handleClick}>Haz clic en mí</ botón >
 < p >Recuento: {recuento}</ p >
 </div>
 </ React.StrictMode >
 );
 }

 exportar contador predeterminado;

Ahora, cuando recargamos el componente en el navegador, la advertencia debería desaparecer y la instrucción console.log debería ejecutarse correctamente cuando el componente esté montado.

¿El modo React Strict es similar a Javascript 'Use Strict'?

No, el 'Modo React Strict' no es similar al 'uso estricto' de Javascript, sin embargo, ambos fueron desarrollados con una intención similar, que es proporcionar una herramienta para ayudar a los desarrolladores a mejorar la calidad y la mantenibilidad de su código React.

Aquí hay una tabla de comparación entre 'React Strict Mode' y 'JavaScript use estricto ':-

¿El modo React Strict funciona como depurador?

No, 'React Strict Mode' no es un depurador.

Se utiliza un depurador para recorrer el código e identificar problemas específicos durante el tiempo de ejecución, mientras que el 'Modo React Strict' se utiliza durante el desarrollo para evitar que se produzcan problemas potenciales en primer lugar.

Yo personalmente uso 'React Strict Mode' y Debugger porque ambos se complementan entre sí y deben usarse en combinación con otras herramientas de desarrollo, como herramientas y prácticas del navegador , para obtener una calidad, mantenibilidad y eficiencia óptimas del código.

A continuación se muestra una tabla comparativa que compara el 'Modo estricto de React' y el Depurador para resaltar las diferencias comunes entre los dos: –

¿Es el modo React Strict una técnica de manejo de excepciones?

No, React Strict Mode no es una técnica de manejo de excepciones; sin embargo, ambos se utilizan para identificar y prevenir posibles problemas en el código de React.

El manejo de excepciones es una técnica utilizada por los programadores de software para detectar errores y eventos inesperados que pueden ocurrir durante la ejecución del programa.

Aquí hay un pequeño ejemplo de manejo de excepciones en ReactJS: –

Ejemplo

 importar React, {useState} de 'react';
 función Ejemplo {
 const (recuento, setCount) = useState(0);
 const mangoIncremento = => {
  intentar {
   si (cuenta >= 10) {
    throw new Error('¡Límite máximo alcanzado!');
   }
   setCount(cuenta + 1);
  } captura (error) {
   consola.error(error.mensaje);
  }
 };
 devolver (
  <div>
   < p >Recuento: {recuento}</ p >
   < botón onClick={handleIncrement}>Incrementar</ botón > 
</div>
 );
 }


 exportar ejemplo predeterminado;

En el manejo de excepciones en el ejemplo de React anterior, tenemos un componente de React simple que usa el gancho useState para administrar un estado de conteo. El componente también tiene un botón que incrementa el estado de conteo cuando se hace clic. Sin embargo, agregamos un bloque try-catch en la función handleIncrement para manejar excepciones.

En el bloque de prueba, verificamos si el estado de conteo ya está en el valor máximo de 10. Si es así, arrojamos un nuevo error con el mensaje '¡Límite máximo alcanzado!'. Si el recuento es inferior a 10, simplemente actualizamos el estado del recuento utilizando la función setCount.

En el bloque catch, detectamos cualquier error generado en el bloque try y registramos el mensaje de error en la consola usando console.error.

De esta manera, si se produce un error en el bloque try, el bloque catch lo manejará y registrará el mensaje de error en la consola sin bloquear la aplicación.

El mismo ejemplo anterior también se puede escribir usando el modo React Strict y el bloque Try and Catch. Aquí está a continuación: –

 importar React, {useState} de 'react';

 función Ejemplo {
 const (recuento, setCount) = useState(0);
 const mangoIncremento = => {
  intentar {
   si (cuenta >= 10) {
    throw new Error('¡Límite máximo alcanzado!');
   }
   setCount(cuenta + 1);
  } captura (error) {
   consola.error(error.mensaje);
  }
 };
 devolver (
  < Reaccionar.Modo estricto >
   <div>
    < p >Recuento: {recuento}</ p >
    < botón onClick={handleIncrement}>Incrementar</ botón >
   </div>
  </ React.StrictMode >
 );
 }

 exportar ejemplo predeterminado;

En el ejemplo anterior, envolvemos nuestro componente dentro del componente React.StrictMode para habilitar el modo estricto. Los bloques try-and-catch siguen siendo los mismos que en el ejemplo anterior, pero ahora cualquier advertencia o error detectado por el modo estricto se mostrará en la consola.

Como ya sabemos, React Strict Mode detectará cualquier problema o error potencial en nuestro código durante el desarrollo, por lo que en este ejemplo nos ayuda a identificar cualquier problema relacionado con el uso del gancho useState y garantizar que nuestro código siga las mejores prácticas.

¿Cuáles son las mejores características del modo React Strict?

Mientras trabajaba en el desarrollo de una nueva función de 'Representación asincrónica' que se lanzará en la versión 16 de React, el equipo de desarrollo de React aprendió algunas lecciones, como los ciclos de vida de los componentes heredados que fomentaban prácticas de codificación inseguras. Estos ciclos de vida fueron: –

• componenteWillMount
• componenteWillReceiveProps
• componenteWillUpdate

Por lo tanto, el componente React Strict Mode, también conocido como , fue escrito para detectar y advertir sobre métodos de ciclo de vida inseguros.

Gradualmente, se agregaron más funciones, como advertencias sobre API obsoletas, etc., para beneficio del desarrollador, ayudándolos a escribir código preparado para el futuro y también garantizando que el código sea compatible con las últimas versiones de ReactJS.

A continuación se muestran las 6 características más atractivas del modo React Strict: –

Detección de métodos de ciclo de vida inseguros

Los componentes de React tienen varios métodos de ciclo de vida, como componenteDidMount y componenteWillUnmount, que se invocan durante varias etapas del ciclo de vida del componente.

Algunos de estos métodos de ciclo de vida han quedado obsoletos o eliminados desde la versión 16.3 de React en adelante debido a su tendencia a fomentar prácticas de codificación inseguras.

'React Strict Mode' le ayuda a detectar estos métodos de ciclo de vida inseguros y le advierte sobre su uso en su código.

Al detectar y eliminar métodos inseguros del ciclo de vida, puede asegurarse de que su código sea más sólido y esté preparado para el futuro.

Los métodos de ciclo de vida inseguros más comunes que pueden afectar el rendimiento, la confiabilidad y la mantenibilidad en React son: –

• componenteWillMount: este método se llama justo antes de montar un componente en el DOM. Se considera inseguro porque puede causar problemas con la representación del lado del servidor y generar inconsistencias entre la representación del lado del servidor y del lado del cliente.
• componenteWillReceiveProps: este método se llama cuando un componente recibe nuevos accesorios. Se considera inseguro porque puede provocar una repetición innecesaria de componentes y provocar problemas de rendimiento.
• componenteWillUpdate: este método se llama inmediatamente antes de actualizar un componente. Se considera inseguro porque puede causar problemas con la representación del lado del servidor y generar inconsistencias entre la representación del lado del servidor y del lado del cliente.
• deberíaComponentUpdate: este método se llama antes de actualizar un componente y determina si el componente debe actualizarse o no. Se considera inseguro porque puede causar problemas de rendimiento, especialmente cuando se usa de manera inapropiada.
• componenteWillUnmount: este método se llama justo antes de que se elimine un componente del DOM. Se considera inseguro porque puede provocar pérdidas de memoria y otros problemas si no se maneja correctamente.

Destacando API obsoletas

React está en constante evolución y algunas API que antes se recomendaban ahora están obsoletas.

Por lo tanto, si utiliza estas API obsoletas en su código de React, pueden llevar su código a posibles problemas y errores que nunca desearía como desarrollador cuidadoso de React.

El 'Modo estricto de reacción' lo ayuda a identificar y resaltar estas API obsoletas en su código, animándolo a actualizar su código para utilizar las API más recientes y recomendadas.

Identificación de posibles efectos secundarios

En React, un efecto secundario es cualquier acción que ocurre fuera del componente, como realizar una solicitud de API o actualizar la ubicación del navegador.

Los efectos secundarios pueden provocar comportamientos inesperados y errores en el código.

'React Strict Mode' te ayuda a identificar posibles efectos secundarios en tus componentes y te advierte sobre ellos.

El ejemplo que leemos en la sección de introducción de este artículo identifica un posible efecto secundario y nos advierte para corregirlo.

Aviso sobre el uso de la API Legacy String Ref

Si recuerdas, en versiones anteriores de React, usabas referencias de cadena para hacer referencia a elementos DOM.

Sin embargo, la API de referencia de cadena ha quedado obsoleta en favor de la API de devolución de llamada de referencia en React versión 16, por lo que el uso de la API de referencia de cadena puede provocar comportamientos inesperados y errores en su código.

'React Strict Mode' le advierte sobre el uso de la API de referencia de cadena heredada y lo alienta a actualizar su código de React para usar la API de referencia de devolución de llamada más nueva, como se muestra en un ejemplo de código a continuación: -

Ejemplo

Este ejemplo muestra un componente de React que utiliza una API de referencia simple con el componente React.StrictMode y nos advierte que estamos usando una API heredada.

 importar React, {useRef} de 'react';

 función MiComponente {
 const inputRef="miEntrada";

 const handleButtonClick = => {
  console.log(this.refs(inputRef).value);
 };

 devolver (
  <Reaccionar.Modo estricto>
   <div>
    <tipo de entrada="texto" ref={inputRef} />
    <button onClick={handleButtonClick}>Registrar valor de entrada</button>
   </div>
  </React.StrictMode>
 );
 }

El aviso que recibimos es: –

Advertencia: la cadena de referencia, "myInput", se ha utilizado en MyComponent. Este patrón es una práctica heredada y no se recomienda en aplicaciones React modernas. En su lugar, utilice la API de referencia de devolución de llamada introducida con React 16 y versiones posteriores. Obtenga más información sobre el uso seguro de referencias aquí:

El componente actualizado utilizando la API de referencia de devolución de llamada es: –

 importar React, {useRef} de 'react';

 función MiComponente {
 const inputRef = useRef(nulo);

 const handleButtonClick = => {
  console.log(inputRef.current.value);
 };

 devolver (
  <Reaccionar.Modo estricto>
   <div>
    <tipo de entrada="texto" ref={inputRef} />
    <button onClick={handleButtonClick}>Registrar valor de entrada</button>
   </div>
  </React.StrictMode>
 );
 }

Advertencia sobre el uso de la API de contexto heredada

El 'Modo estricto de React' a partir de la versión 18 advierte sobre el uso de la API de contexto heredada en su código de React, lo que le solicita que actualice a una versión más nueva de la API de contexto.

La nueva API Context es más potente y fácil de usar, al tiempo que ofrece mejor rendimiento y escalabilidad.

React.StrictMode detecta el uso de la API de contexto heredada al verificar ciertos patrones en el código, como acceder a la propiedad de contexto de un componente o pasar un objeto como valor de contexto.

Advertencia sobre el uso obsoleto de findDOMNode

React.StrictMode advierte sobre el uso obsoleto de findDOMNode al verificar las llamadas a este método en el código.

Esto se debe a que findDOMNode puede causar problemas de rendimiento y, en general, no se recomienda en las aplicaciones React modernas.

El enfoque alternativo al uso de findDOMNode es usar el atributo ref para crear una referencia a un elemento DOM y luego manipular el elemento DOM usando la referencia.

Veamos un código de ejemplo como se muestra a continuación: –

 clase MiComponente extiende React.Component {
 constructor(accesorios) {
  súper(accesorios);
  this.inputRef = React.createRef;
 }

 handleButtonClick {
  console.log(this.inputRef.current.value);
 }

 prestar { 
devolver (
 <Reaccionar.Modo estricto>
 <div>
 <tipo de entrada="texto" ref={this.inputRef} />
 <button onClick={ => this.handleButtonClick }>Registrar valor de entrada</button>
 </div>
 </React.StrictMode>
 );
 }
 }

En el ejemplo anterior, creamos una referencia al elemento de entrada usando el atributo ref y createRef. Luego podemos acceder al valor del elemento de entrada utilizando la propiedad actual del objeto ref.

Usar el atributo ref en lugar de findDOMNode es una forma más moderna y eficiente de manipular el DOM en React y lo recomienda React.StrictMode.

Identificación de problemas relacionados con la arquitectura de desmontaje y reensamblaje de React v18

En React v18, se introdujo un nuevo comportamiento de modo estricto para desmontar y volver a montar.

Con este nuevo comportamiento, cada elemento se desmonta y se vuelve a montar exactamente con el mismo estado y efectos que cuando se montó inicialmente.

El proceso de ensamblar y reensamblar un elemento utilizando el comportamiento anterior es el siguiente: –

• El elemento se ensambla inicialmente.
• Se generan efectos secundarios.
• El modo estricto ahora emula la eliminación de estos efectos.
• Cuando se vuelve a montar el componente, se producen los mismos efectos secundarios.

Esta antigua arquitectura de desmontaje y reensamblaje puede introducir algunos problemas potenciales, como una reproducción involuntaria de componentes o efectos secundarios inesperados. 'React Strict Mode' ayuda a detectar estos problemas ejecutando componentes en un modo de desarrollo más estricto.

Veamos cómo podemos usar React Strict Mode con esta nueva arquitectura de desmontaje y reensamblaje: –

 importar React, {useState} de 'react';

 función Contador {
 const (recuento, setCount) = useState(0);

 devolver (
  < Reaccionar.Modo estricto >
   <div>
    < h1 >Recuento: {recuento}</ h1 > 
< botón onClick={ => setCount(count + 1)}>Incrementar</ botón >
 </div>
 </ React.StrictMode >
 );
 }

 exportar contador predeterminado;

Mejorar la experiencia de desarrollo y promover las mejores prácticas

El 'Modo React Strict' ayuda a mejorar la experiencia de desarrollo al detectar posibles problemas y errores en las primeras etapas del proceso de desarrollo y garantizar que su código sea más sólido y esté preparado para el futuro.

Resumen

Como desarrollador de React, puede utilizar el 'Modo estricto de React' para detectar problemas potenciales de manera temprana y escribir un mejor código.

Detecta métodos de ciclo de vida inseguros, advierte sobre API obsoletas, identifica posibles efectos secundarios y promueve mejores prácticas que le ayudan a mejorar su experiencia de desarrollo.

El modo estricto en React no es una herramienta de depuración, pero puede evitar que los problemas se implementen en producción al proporcionar comprobaciones y advertencias adicionales.

Si te gustó esto, asegúrate de consultar nuestros otros artículos sobre React.

• Más de 24 bibliotecas de componentes de interfaz de usuario de React
• React vs Backbone.js: ¿Cuál es mejor para tu proyecto?
• Reaccionar WebSockets: Tutorial
• Una guía completa para el renderizado del lado del servidor en React
• Svelte Vs React: cuál es mejor

Preguntas frecuentes

¿Qué es el modo reaccionar estricto?

React Strict Mode es una herramienta de React que ayuda a identificar problemas potenciales en una aplicación. No muestra ninguna interfaz de usuario visible, pero permite comprobaciones y advertencias adicionales para sus descendientes. Estas comprobaciones solo se ejecutan en modo de desarrollo y no afectan la compilación de producción.

¿Cuál es el uso del modo estricto en JavaScript?

El modo estricto de JavaScript es una forma de optar por una variante estricta de JavaScript, con el objetivo de corregir errores que afectan las optimizaciones del motor de JavaScript y no permitir la sintaxis que probablemente se defina en futuras versiones de ECMAScript. Esto aumenta la seguridad del código al evitar errores comunes, como declaraciones accidentales de variables globales, y hacer que el código sea más eficiente al deshabilitar funciones que ralentizan el motor JavaScript.