¿QUÉ ES STRICT MODE EN REACT?

July 1, 2024

En React, el modo estricto (strict mode) es una herramienta que permite a los desarrolladores escribir código más seguro y predecible. El modo estricto se puede habilitar en cualquier componente React añadiendo la siguiente línea al principio del archivo:

'use strict';

Al activar el modo estricto, se realizan varias mejoras en la verificación de errores y en la detección de comportamientos inseguros en el código. Algunas de las mejoras incluyen:

Se lanza un error cuando se intenta modificar una propiedad de sólo lectura.
Se lanza un error cuando se utiliza una variable que no ha sido declarada.
Se lanza un error cuando se utilizan palabras clave reservadas que no son válidas en un contexto determinado.
Se lanza un error cuando se intenta eliminar una variable o una función.
Se lanzan advertencias cuando se utilizan prácticas consideradas inseguras o desaconsejadas.

En general, el modo estricto es una herramienta muy útil que ayuda a los desarrolladores a escribir un código más seguro, limpio y fácil de mantener. Se recomienda utilizarlo siempre que sea posible.

Cómo instalar Strict Mode en React

Para habilitar el modo estricto en React, simplemente tienes que agregar la línea 'use strict'; al comienzo de tu archivo JavaScript que contiene el componente de React.

Por ejemplo, si tienes un archivo llamado MiComponente.js que contiene un componente de React, puedes agregar la línea 'use strict'; al comienzo del archivo de la siguiente manera:

'use strict';

import React from 'react';

function MiComponente(props) {
  // ...
}

export default MiComponente;

Ten en cuenta que el modo estricto se habilitará solo en el archivo que agregues la línea 'use strict';, y no se extenderá a otros archivos en tu aplicación de React. Por lo tanto, deberás agregar esta línea en cada archivo individual de React en el que desees habilitar el modo estricto.

Además, ten en cuenta que el modo estricto puede causar errores en algunos casos si tu código no cumple con las reglas estrictas. Por lo tanto, es importante realizar pruebas exhaustivas después de habilitar el modo estricto para asegurarte de que no haya errores.

Cómo utilizar Strict Mode en React

En React, puedes habilitar strict mode (modo estricto) para detectar problemas potenciales en tu aplicación. El modo estricto es una herramienta de desarrollo que te ayuda a encontrar y corregir errores comunes, y también a prevenir comportamientos imprevistos.

Para habilitar el modo estricto en una aplicación de React, debes seguir los siguientes pasos:

Importa React y ReactDOM en tu archivo de entrada de la aplicación.

import React from 'react';
import ReactDOM from 'react-dom';

2. Envolviendo el componente raíz de la aplicación en <React.StrictMode>.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

3. Con esto, ya tienes habilitado el modo estricto en tu aplicación de React. A partir de ahora, si hay algún problema potencial en tu aplicación, como por ejemplo, el uso de funciones obsoletas de React, el modo estricto te alertará en la consola del navegador.

Ten en cuenta que el modo estricto solo está destinado para el ambiente de desarrollo y no se debe utilizar en producción. Además, algunas librerías de terceros pueden no ser compatibles con el modo estricto, por lo que es importante hacer pruebas exhaustivas después de habilitarlo.

Ventajas de Strict Mode en React

El modo estricto (strict mode) de React es una herramienta muy útil para mejorar la calidad de tu código y reducir la cantidad de errores en tu aplicación. Algunas de las ventajas más importantes de utilizar el modo estricto en React son:

Detección temprana de errores: El modo estricto te permite detectar errores comunes y problemas potenciales en tu aplicación durante el desarrollo, en lugar de descubrirlos más tarde en el proceso de pruebas o cuando la aplicación ya está en producción.
Mejora de la calidad del código: El modo estricto te ayuda a identificar y corregir problemas de código que podrían no haber sido evidentes de otra manera, como el uso de funciones obsoletas, errores en el manejo de ciclos de vida de componentes, entre otros.
Compatibilidad con versiones futuras de React: El modo estricto te prepara para futuras versiones de React, ya que desalienta el uso de características obsoletas y fomenta el uso de las nuevas características y mejores prácticas.
Mejora del rendimiento: El modo estricto también puede ayudar a mejorar el rendimiento de tu aplicación al detectar y evitar operaciones costosas y redundantes en el código.

En resumen, el modo estricto de React es una herramienta muy útil para mejorar la calidad y la robustez de tu código, reducir errores y prepararte para futuras versiones de React.

Desventajas de Strict Mode en React

Aunque el modo estricto (strict mode) de React tiene muchas ventajas, también existen algunas desventajas que debes considerar:

Puede ser más restrictivo: El modo estricto de React es más restrictivo en cuanto a las operaciones permitidas en el código. Esto puede dificultar el uso de algunas librerías de terceros que no están diseñadas para funcionar en el modo estricto.
Puede aumentar el tiempo de desarrollo: Al utilizar el modo estricto, es posible que necesites dedicar más tiempo a corregir problemas y errores en el código. Además, el modo estricto también puede introducir nuevas reglas y convenciones que debes aprender y aplicar.
No se debe utilizar en producción: El modo estricto no debe utilizarse en producción, ya que puede tener un impacto negativo en el rendimiento de la aplicación. Esto significa que debes ser cuidadoso al evaluar el impacto de las correcciones que realices en modo estricto antes de aplicarlas a la versión final de tu aplicación.

En resumen, el modo estricto de React tiene algunas desventajas, como ser más restrictivo y aumentar el tiempo de desarrollo, pero en general las ventajas superan las desventajas.

Es importante evaluar cuidadosamente las implicaciones de utilizar el modo estricto en tu aplicación y asegurarte de que sea adecuado para tus necesidades antes de habilitarlo.

Códigos más utilizados en Strict Mode en React

En el modo estricto (strict mode) de React, hay algunos códigos que son muy útiles y se utilizan con frecuencia para mejorar la calidad del código y prevenir errores. Aquí te muestro algunos ejemplos:

Utilización de hooks únicamente en componentes funcionales: Los hooks de React son funciones que te permiten agregar características a tus componentes funcionales, como la capacidad de utilizar estados o efectos. En el modo estricto, es importante utilizar los hooks únicamente en componentes funcionales y no en clases.

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>Increment count</button>;
}

2. Evitar el uso de setState en componentDidMount: En el modo estricto, no se debe utilizar setState en el método de ciclo de vida componentDidMount, ya que esto puede causar problemas de sincronización. En su lugar, se recomienda utilizar componentDidUpdate.

class MyComponent extends React.Component {
  state = { count: 0 };

  componentDidMount() {
    // NO utilizar setState aquí
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.count !== prevState.count) {
      console.log('Count has changed');
    }
  }

  render() {
    return <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment count</button>;
  }
}

3. Evitar el uso de findDOMNode: La función findDOMNode te permite obtener el nodo DOM correspondiente a un componente de React, pero en el modo estricto se desaconseja su uso. En su lugar, se recomienda utilizar ref para obtener una referencia al nodo DOM.

class MyComponent extends React.Component {
  myRef = React.createRef();

  componentDidMount() {
    console.log(this.myRef.current); // Utilizar ref para obtener el nodo DOM
  }

  render() {
    return <div ref={this.myRef}>Hello, world!</div>;
  }
}

Estos son solo algunos ejemplos de códigos que se utilizan con frecuencia en el modo estricto de React para mejorar la calidad del código y prevenir errores. Recuerda que el modo estricto es una herramienta muy útil para detectar problemas potenciales en tu aplicación y te ayuda a crear código más robusto y de calidad.

Consejos para desarrolladores Juniors que estén utilizando el modo estricto en React:

Lee y comprende la documentación: La documentación oficial de React proporciona una descripción detallada del modo estricto y cómo utilizarlo. Antes de empezar a utilizarlo, es importante que leas y comprendas bien la documentación para que sepas qué puedes esperar del modo estricto y cómo utilizarlo correctamente.
Empieza por habilitar el modo estricto en tu aplicación de prueba: Si nunca has utilizado el modo estricto antes, es recomendable que empieces por habilitarlo en tu aplicación de prueba antes de hacerlo en tu aplicación en producción. Esto te permitirá probar y experimentar con el modo estricto sin arriesgar la integridad de tu aplicación principal.
Haz uso de las herramientas de depuración: En el modo estricto, es posible que te encuentres con errores o advertencias que no habías visto antes. Utiliza las herramientas de depuración que proporciona React, como la consola de desarrollador del navegador, para identificar y solucionar estos problemas.
Busca la opinión de tus colegas: Si eres un desarrollador junior, es importante buscar la opinión de tus colegas más experimentados. Comparte tu código con ellos y pídeles su opinión sobre cómo podrías mejorar tu uso del modo estricto. El feedback es una parte importante del proceso de aprendizaje y te ayudará a mejorar tus habilidades como desarrollador.
Utiliza los hooks correctamente: En el modo estricto, los hooks deben utilizarse únicamente en componentes funcionales y no en clases. Asegúrate de utilizar los hooks correctamente y no mezclarlos con el código de las clases.
Comprueba el rendimiento: El modo estricto puede tener un impacto en el rendimiento de tu aplicación, especialmente durante el desarrollo. Utiliza herramientas de medición de rendimiento para comprobar si el modo estricto está afectando negativamente el rendimiento de tu aplicación.

En general, la opinión de los programadores sobre el modo estricto en React es muy positiva. Muchos consideran que es una herramienta muy útil para mejorar la calidad del código y prevenir errores, especialmente en equipos grandes o proyectos complejos.

Entre las ventajas más destacadas, los programadores mencionan que el modo estricto ayuda a detectar problemas en el código que de otra manera podrían pasar desapercibidos, mejora la legibilidad del código, y ayuda a evitar errores comunes como el uso inadecuado de setState o la manipulación directa del DOM.

Además, el modo estricto es fácil de implementar y no requiere cambios significativos en la forma de escribir código. Simplemente agregando una línea en el archivo de entrada de tu aplicación, ya puedes empezar a aprovechar los beneficios del modo estricto.

Por supuesto, como con cualquier herramienta, siempre hay algunos programadores que tienen opiniones diferentes o que prefieren no utilizar el modo estricto por diversas razones. Algunos argumentan que puede afectar negativamente el rendimiento de la aplicación, especialmente en equipos más pequeños o proyectos más simples. Otros pueden sentir que las advertencias y errores que se generan por el modo estricto son demasiado molestas o que la curva de aprendizaje es demasiado empinada.

En resumen, el modo estricto en React es una herramienta muy útil y recomendada por muchos programadores, aunque como siempre, cada equipo y proyecto es diferente y es importante tomar en cuenta las necesidades específicas de tu aplicación al decidir si utilizarlo o no.