¿Qué es StrictMode en React?

StrictMode es una herramienta de desarrollo de React que se utiliza principalmente para resaltar posibles problemas en una aplicación web. Activa comprobaciones y advertencias de obsolescencia adicionales para sus componentes secundarios. Una de las razones de su popularidad es el hecho de que proporciona retroalimentación visual (mensajes de advertencia/error) cada vez que no se siguen las pautas de React y las prácticas recomendadas. Al igual que React Fragment, el componente React StrictMode no muestra ninguna interfaz de usuario visible. 

React StrictMode se puede ver como un componente de ayuda que permite a los desarrolladores codificar de manera eficiente y llama su atención sobre cualquier código sospechoso que se haya agregado accidentalmente a la aplicación. StrictMode se puede aplicar a cualquier sección de la aplicación, no necesariamente a toda la aplicación. Es especialmente útil para usar mientras se desarrollan nuevos códigos o se depura la aplicación.

Ejemplo:

import React from 'react';
  
function StictModeDemo() {
  return (
    <div>
      <Component1 />
      <React.StrictMode>
        <React.Fragment>
          <Component2 />
          <Component3 />
        </React.Fragment>
      </React.StrictMode>
      <Component4 />
    </div>
  );
}

Explicación: En el ejemplo anterior, las comprobaciones de StrictMode se aplicarán solo en Component2 y Component3 (ya que son los componentes secundarios de React.StrictMode). Contrariamente a esto, Component1 y Component4 no tendrán controles.

Ventajas: React StrictMode ayuda a identificar y detectar varias advertencias/errores durante la fase de desarrollo, a saber:

1. Ayuda a identificar aquellos componentes que tienen ciclos de vida inseguros: algunos de los métodos de ciclo de vida de componentes heredados se consideran inseguros para usar en aplicaciones asincrónicas. React StrictMode ayuda a detectar el uso de tales métodos inseguros. Una vez habilitado, muestra una lista de todos los componentes que usan métodos de ciclo de vida inseguros como mensajes de advertencia.
2. Advierte sobre el uso de la API de referencia de string heredada: Inicialmente, había dos métodos para administrar las referencias: la API de referencia de string heredada y la API de devolución de llamada. Más tarde, se agregó un tercer método alternativo, la API createRef, reemplazando las referencias de string con referencias de objetos, lo que permitió que StrictMode emitiera mensajes de advertencia cada vez que se usaran referencias de string.
3. Advierte sobre el uso de findDOMNode en desuso: dado que findDOMNode es solo una API de lectura única, no es posible controlar los cambios cuando un componente secundario intenta representar un Node diferente (que no sea el representado por el componente principal). Estos problemas fueron detectados por React StrictMode y se muestran como mensajes de advertencia.

Puntos importantes adicionales para recordar:

• Dado que StrictMode es una herramienta de desarrollo, solo se ejecuta en modo de desarrollo. No afecta la construcción de producción de ninguna manera.
• Para identificar y detectar cualquier problema dentro de la aplicación y mostrar mensajes de advertencia, StrictMode representa cada componente dentro de la aplicación dos veces.