Modo estricto

StrictMode es una herramienta para destacar problemas potenciales en la aplicación. Al igual que Fragment, StrictMode no renderiza nada en la interfaz de usuario. Este modo también activa advertencias y comprobaciones adicionales para sus descendientes.

Nota:

Las comprobaciones hechas por el modo estricto solamente son ejecutadas en el modo de desarrollo; no van a impactar producción.

Puedes habilitar el modo estricto para cualquier parte de tu aplicación. Por ejemplo:

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>      <Footer />
    </div>
  );
}

En el ejemplo anterior, las comprobaciones del modo estricto no va a correr en los componentes de Header y Footer. Sin embargo, ComponentOne y ComponentTwo, así como todos sus descendientes, tendrán las comprobaciones.

StrictMode en la actualidad ayuda a:

• Identificar ciclos de vida inseguros
• Advertencia sobre el uso de la API legado de string ref
• Advertencia sobre el uso del método obsoleto findDOMNode
• Detectar efectos secundarios inesperados
• Detectar el uso de la API legado para el contexto
• Asegurar estado reutilizable

Funcionalidades adicionales serán agregadas en futuras versiones de React.

Identificar ciclos de vida inseguros

Como fue explicado en este artículo del blog, algunos ciclos de vida antiguos son inseguros para ser usados en aplicaciones de React asíncronas. Sin embargo, si tu aplicación utiliza bibliotecas de terceros, puede ser difícil asegurar que estos ciclos de vida no estén siendo utilizados. Por fortuna, ¡el modo estricto puede ayudar con esto!

Cuando el modo estricto está habilitado, React reúne en una lista todos los componentes de clases que están usando ciclos de vida inseguros, y registra por medio de un mensaje de advertencia la información sobre estos componentes, de esta forma:

Solucionar los problemas identificados por el modo estricto ahora, hará que sea más fácil para ti aprovechar el renderizado asíncrono en futuras versiones de React.

Advertencia sobre el uso de la API legado de string ref

Anteriormente, React proporcionaba dos formas para utilizar refs: la API legado de string ref y la API por callback. Aunque la API de string ref era la más cómoda de las dos, tenía muchas desventajas y por lo tanto nuestra recomendación oficial fue usar la forma de callback en su lugar

React 16.3 agregó una tercera opción que ofrece la comodidad que tiene string ref sin ninguna de las desventajas:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();  }

  render() {
    return <input type="text" ref={this.inputRef} />;  }

  componentDidMount() {
    this.inputRef.current.focus();  }
}

Desde que los object refs fueron agregados en gran parte como reemplazo a los string refs, el modo estricto ahora advierte sobre el uso de string refs.

Nota:

Los callback refs seguirán siendo soportados en conjunto con la nueva API de createRef.

No necesitas reemplazar los callback refs en tu componente. Son un poco más flexibles, por lo que continuarán estando como una característica avanzada.

Aprende más sobre la API createRef aquí.

Advertencia sobre el uso del método obsoleto findDOMNode

React solía soportar findDOMNode para buscar en el árbol un nodo del DOM dada una instancia de una clase. Normalmente no necesitas hacer esto ya que puedes