Uso del modo estricto en React 18: una guía para sus nuevos comportamientos

React ha existido por un tiempo. Cada versión principal nos presentó nuevas técnicas, herramientas y formas de abordar los problemas de la interfaz de usuario.

React lanzó v18 en marzo de 2022 e incluyó algunos cambios en la arquitectura. Esta versión se centró principalmente en el envío del modo simultáneo, nuevos ganchos de React y cambios de comportamiento en la API de modo estricto de React. Si bien el modo estricto ha sido una característica de React durante un tiempo, v18 lo hace mejor para detectar errores tempranos, lo que hace que la base de código sea más predecible.

En este artículo, aprenderá sobre el modo estricto y por qué se introdujo en primer lugar. Verá sus diversas características, así como también cómo v18 ha mejorado su API y brinda una compatibilidad aún mejor con los ganchos.

El modo estricto intenta estar preparado para el futuro con la arquitectura basada en el suspenso de React, lo que lo hace más resistente a los problemas de introspección de la interfaz de usuario. ¡Empecemos!

Introducción al modo estricto de reacción

El modo estricto se puede considerar como una notación de «uso estricto». Esto se introdujo hace algún tiempo en ECMAScript v5 y garantiza una versión más estricta de JavaScript.

"use strict";
x = 3.1415;

El ejemplo anterior devolvería un error ya que x no está definido. Observe cómo esto se asegura agregando «uso estricto» en la parte superior del archivo. Es posible que ni siquiera obtenga este error en los casos en que no se agrega «uso estricto», ya que JavaScript tiende a comportarse de manera extraña si no está sujeto a definiciones de tipo estrictas (como «uso estricto», TypeScript, flujo, etc.)

Del mismo modo, el modo estricto en React es una herramienta solo para desarrolladores que impone advertencias y verificaciones más estrictas cuando escribe código React.

Puede habilitar StrictMode para cualquier componente simplemente envolviendo el nombre del componente como accesorio secundario en StrictMode, así:

<StrictMode>
    <Button />
</StrictMode>
<StrictMode>
    <Navbar />
</StrictMode>

Una forma más recomendada es envolver el componente de la aplicación raíz con StrictMode. Tenga en cuenta que la aplicación suele ser el componente raíz en create-react-app y Next.js.

<StrictMode>
    <App />
</StrictMode/>

Esto impone verificaciones y advertencias de tiempo de desarrollo en toda su base de código React. Por supuesto, asegúrese de importar StrictMode de esta manera:

import { StrictMode } from 'react'
 <StrictMode>
   .....
 </StrictMode>

o así:

import React from 'react'
 <React.StrictMode>
  .....
 </React.StrictMode>

Ahora echemos un vistazo más de cerca a las diversas implicaciones de dónde brilla el modo estricto y ayuda a detectar problemas antes en el desarrollo.

Advertencias sobre el uso de métodos de ciclo de vida inseguros

Los métodos de ciclo de vida basados ​​en clases de React han sufrido una serie de cambios en la API. Muchos métodos que alguna vez fueron ampliamente utilizados ahora están oficialmente en desuso y se desaconsejan a favor de API más modernas.

El modo estricto de reacción ahora advertirá a los desarrolladores si están utilizando estas API obsoletas, como componenteWillMount, componenteWillReceiveProps y componenteWillUpdate. Estos ahora se consideran inseguros de usar, tanto que React agregó un prefijo NO SEGURO a estos nombres de API:

• UNSAFE_componentWillMount
• UNSAFE_componentWillReceiveProps
• UNSAFE_componentWillUpdate

El modo estricto es incluso lo suficientemente inteligente como para advertir a los desarrolladores si alguno de los paquetes de terceros utilizados contiene estas API obsoletas. Puede modificar estos paquetes usted mismo o elegir una alternativa.

Recomiende la API createRef en lugar de la cadena de referencia anterior

Si trabajó con React cuando la arquitectura basada en clases era la forma de facto de construir componentes, es posible que haya utilizado la API de referencia de cadena como:

class Form extends Component {
  render() {
    return <input onClick={() => this.focus()} ref="input" />;
  }
  focus() {
    console.log(this.refs.input.value);
  }
}

Si bien es legible y conveniente de usar, esta API ahora se considera heredada por varias razones, que incluyen:

Más artículos interesantes de LogRocket:

• Un componente envuelto no puede determinar si su componente secundario ya tiene una referencia. Este problema se puede resolver utilizando un modelo de referencia de devolución de llamada
• La API de referencia de cadenas puede ser difícil de leer y realizar análisis estáticos con un verificador de tipos

El modo estricto de React advierte a los desarrolladores que utilicen un patrón de devolución de llamada más moderno o una API createRef en su lugar.

Advertencias sobre el uso obsoleto de findDOMNode

findDOMNode es una API basada en clases que se utiliza para apuntar a un elemento en lo profundo del árbol DOM desde cualquier componente.

class Layout extends Component {


componentDidMount() {
  const nodeElement = ReactDOM.findDOMNode(this);
}


     render () {
     return <Navigation>{this.props.children}</Navigation>;
     }
    }

Esto puede parecer correcto, pero en realidad plantea problemas en el principio de abstracción de React.

El elemento padre debe asegurarse de que sus hijos desciendan y representen los nodos DOM correctos. Una gran desventaja es que findDOMNode es una API de llamada única, por lo que si se cambia un elemento de nodo debido a una actualización de estado de todas las líneas, no se reflejará ni actualizará con la API findDOMNode.

Dadas todas estas deficiencias, el modo estricto le advierte que no use esta API y que podría eliminarse en futuras versiones de React.

La mayoría de las veces ahora, el elemento DOM se puede orientar usando ref. Simplemente puede adjuntar una referencia de referencia al elemento que necesita apuntar.

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();    
}

// handle textInput.current logic here //
  render() {
    return (
      <input
          type="text"
          ref={this.textInput} 
   />       
    );
  }
}

Detectar efectos secundarios inesperados

El modo estricto de React hace algunas cosas geniales sobre ganchos incorporados populares como useState, useMemo y useReducer. Específicamente, llama a estas funciones dos veces en desarrollo y una vez (como se esperaba) en modo de producción.

Esto puede causar cierta confusión al depurar el código, pero al hacerlo, el modo estricto garantiza que se comprueben posibles fugas de memoria. También ayuda a que el código sea más determinista para el modo estricto.

No se limita solo a los componentes funcionales, el mismo comportamiento de invocar funciones dos veces también se puede encontrar en la arquitectura basada en clases, como en el constructor, el renderizador, shouldComponentUpdate y más.

Si está utilizando una aplicación de creación y reacción, el modo estricto está habilitado de forma predeterminada para toda la aplicación. Al usar estos ganchos o funciones de actualización de estado en componentes de clase, incluso vería mensajes de consola registrados dos veces.

Antes de v18, React solía deshabilitar el segundo método console.log inmediatamente cuando las funciones se llamaban dos veces. Pero, con v18, React no elimina ningún registro para permitir a los desarrolladores una mayor transparencia. Todos estos registros ahora se llaman dos veces cuando se invocan dos veces funciones, ganchos, etc.

Advertencias sobre la antigua API de contexto

Similar a la API de referencias, también tenemos una API de contexto heredada. El modo estricto advierte contra el uso de la API contextual heredada, ya que se eliminará en versiones futuras. En cambio, tenemos una API de contexto más moderna que usa el modelo de proveedor-consumidor.

const ThemeContext = React.createContext('dark')

// consume it here
 <ThemeContext.Provider value={data}>
     {children}
</ThemeContext.Provider>

Esta es ahora la forma recomendada de administrar el contexto del estado de la aplicación utilizando la nueva API de contexto.

Arquitectura de desmontaje y reensamblaje de React v18

React v18 introdujo un nuevo comportamiento de modo estricto con respecto a desmontar y volver a montar. Ahora cada elemento se desmontará y se volverá a montar con el mismo estado y efectos que cuando se montó el elemento por primera vez.

Un ciclo típico de montaje y remontaje podría verse así:

• El elemento se monta por primera vez.
• Se crean efectos secundarios.
• El modo estricto ahora imita la destrucción de efectos
• Los efectos secundarios se aplicarán a los componentes montados.

Esto hace que el código de React sea más resistente y ayuda a preservar el estado de una interfaz de usuario. Por ejemplo, si un usuario está en la primera pestaña e inmediatamente cambia entre la primera y la segunda pestaña, React necesita asegurarse de que se monte y destruya una buena parte de las cosas mientras mantiene la interfaz en buen estado.

A partir de v18, el modo estricto tiene este comportamiento adicional de solo desarrollo.

Conclusión

¡Ahora lo tienes todo cubierto en la actualización del modo estricto a React v18!

Hemos visto cómo el modo estricto afecta a las herramientas del modo de desarrollo. Tiene sus propios conjuntos de reglas y comportamientos que aseguran estrictas advertencias y controles en la base del código. Esto no solo ayuda a los desarrolladores a preparar el código base para el futuro, sino también para la refactorización.

El equipo oficial de React recomienda aplicar el modo estricto en toda la aplicación para aprovecharlo al máximo. Para futuras versiones de React, se espera que el modo estricto obtenga aún más funciones para ayudar a los desarrolladores como nosotros a tener un mejor soporte de herramientas.