StrictMode

Introducción
StrictMode es una herramienta de desarrollo en React que te ayuda a identificar problemas potenciales en tu aplicación. Es un componente especial que no se renderiza en la interfaz de usuario, pero realiza comprobaciones adicionales en los componentes hijos para garantizar que sigan las mejores prácticas.

1. Qué es StrictMode? #

• Propósito principal: Mejorar la calidad del código asegurando que el comportamiento de los componentes sea seguro y predecible.
• Solo en desarrollo: StrictMode no afecta al rendimiento en producción.

2. Cómo Usarlo #

StrictMode envuelve partes de tu aplicación para activar sus comprobaciones.

Sintaxis #

1import React from "react";
2import ReactDOM from "react-dom";
3import App from "./App";
4
5ReactDOM.createRoot(document.getElementById("root")).render(
6  <React.StrictMode>
7    <App />
8  </React.StrictMode>
9);

Comportamiento #

• Las comprobaciones se aplican a todos los componentes dentro de <React.StrictMode>.
• Puedes envolver toda la aplicación o solo partes específicas.

3. Qué Hace StrictMode? #

1. Detecta efectos secundarios peligrosos:

   • Verifica el uso correcto de useEffect y otros hooks.
   • Llama a funciones de ciclo de vida como componentDidMount y useEffect dos veces (en modo desarrollo) para encontrar problemas.

2. Detecta APIs obsoletas:

   • Avisa si estás usando métodos como componentWillMount o componentWillReceiveProps, que están obsoletos.

3. Verifica referencias directas al DOM:

   • Ayuda a identificar problemas con manipulaciones no seguras del DOM.

4. Detecta actualizaciones de estado inseguras:

   • Identifica situaciones donde se realizan actualizaciones de estado en medio de renderizaciones.

4. Ejemplo Básico #

Código #

1import React, { useState, useEffect } from "react";
2
3function ComponenteEjemplo() {
4  const [contador, setContador] = useState(0);
5
6  useEffect(() => {
7    console.log("Efecto ejecutado");
8    return () => {
9      console.log("Limpieza del efecto");
10    };
11  }, []);
12
13  return (
14    <div>
15      <p>Contador: {contador}</p>
16      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
17    </div>
18  );
19}
20
21function App() {
22  return (
23    <React.StrictMode>
24      <ComponenteEjemplo />
25    </React.StrictMode>
26  );
27}
28
29export default App;

Salida en Consola (Modo Desarrollo) #

Al renderizar el componente:

1. El efecto (useEffect) se ejecuta dos veces.
2. La función de limpieza del efecto se llama entre renderizados.

Esto ayuda a verificar que el efecto y su limpieza estén implementados correctamente.

5. Qué Cambios Introduce StrictMode? #

Re-renderización Doble de Componentes (En Desarrollo) #

React.StrictMode monta, desmonta y vuelve a montar los componentes en desarrollo para detectar problemas con:

• Efectos secundarios inesperados.
• Dependencias incorrectas en useEffect.

Ejemplo de Problema Detectado #

1import React, { useState } from "react";
2
3function ComponenteProblema() {
4  const [contador, setContador] = useState(0);
5
6  // Problema: Esta operación no es segura
7  console.log("Renderizando componente");
8  if (contador > 3) {
9    setContador(0); // Actualización de estado en medio de un render
10  }
11
12  return <p>Contador: {contador}</p>;
13}
14
15function App() {
16  return (
17    <React.StrictMode>
18      <ComponenteProblema />
19    </React.StrictMode>
20  );
21}
22
23export default App;

Comportamiento #

1. Sin StrictMode: El componente podría funcionar incorrectamente sin avisos.
2. Con StrictMode: React muestra un error en la consola porque las actualizaciones de estado durante un render no son seguras.

6. Usos Comunes de StrictMode #

1. Comprobación de Hooks Correctos:

   • Detecta dependencias faltantes en useEffect.
   • Identifica actualizaciones inseguras de estado.

2. Migración a Nuevas APIs:

   • Avisa sobre métodos de ciclo de vida obsoletos.

3. Preparación para React Concurrent Mode:

   • Garantiza que los componentes sean compatibles con las características más avanzadas de React.

7. Limitaciones de StrictMode #

1. Solo en Desarrollo:

   • No afecta la producción, por lo que no impacta al usuario final.

2. Más Renderizaciones:

   • Puede causar confusión porque los efectos secundarios se ejecutan varias veces en desarrollo.

3. Solo Comprobaciones, No Errores:

   • StrictMode no arregla problemas automáticamente; solo te informa para que los soluciones.

8. Caso Real: Integración con Componentes Externos #

Si estás usando una biblioteca que manipula el DOM directamente, StrictMode puede ayudarte a identificar problemas. Por ejemplo:

1import React, { useEffect, useRef } from "react";
2
3function ComponenteConDOM() {
4  const divRef = useRef(null);
5
6  useEffect(() => {
7    const div = divRef.current;
8    div.textContent = "¡Texto cambiado directamente!";
9    return () => {
10      div.textContent = ""; // Limpieza
11    };
12  }, []);
13
14  return <div ref={divRef}>Texto inicial</div>;
15}
16
17function App() {
18  return (
19    <React.StrictMode>
20      <ComponenteConDOM />
21    </React.StrictMode>
22  );
23}
24
25export default App;

Comportamiento #

• StrictMode desmontará y volverá a montar el componente, asegurándose de que la limpieza del DOM sea correcta.