El propósito del modo estricto en React

1. Modo estricto en React
2. Ventajas del modo React Strict
3. Mejores usos para React Strict Mode

JavaScript es un gran lenguaje de programación para desarrollar aplicaciones de pila completa. Los desarrolladores novatos a menudo tienen dificultades para escribir código JavaScript limpio y organizado. Afortunadamente, existen marcos de JavaScript que proporcionan cierta estructura para escribir aplicaciones web. Y React es uno de, si no el más popular, framework para escribir aplicaciones web eficientes. Proporciona un componente auxiliar llamado StrictMode para resaltar piezas de código que se desvían de las prácticas estándar en React.

Modo estricto en React

React StrictMode destaca los problemas potenciales en la aplicación. Al hacerlo, le ayuda a escribir aplicaciones más seguras y legibles. Esta función está incluida en el paquete React, por lo que no tiene que importarla por separado. Si tiene algún código sospechoso, envuélvalo dentro del componente auxiliar StrictMode y listo. Aquí cómo usarlo en componentes funcionales de React:

import React, { Component } from 'react';
function SuspiciousComponent() {
  return (
    <div>Let's say this is suspicious</div>
  )
}
function App() {
  return (
    <div>
    	<React.StrictMode>
    	<SuspiciousComponent></SuspiciousComponent>
    	</React.StrictMode>
    </div>
  )
}

En este caso, acabamos de envolver <SuspiciousComponent> con nuestro componente auxiliar. Si cambiamos el código del componente secundario a algo que vaya en contra de las prácticas recomendadas en React, StrictMode daría la alarma. Esto es necesario porque es posible que algunas malas prácticas no bloqueen la aplicación. El hecho de que la aplicación funcione no significa que no haya problemas con ella. Si sospecha de un fragmento de código, envuélvalo con el componente auxiliar <React.StrictMode> para asegurarse de que no tenga nada de malo. Puede envolver un solo componente, varios componentes o un árbol completo.

Si desea buscar errores potenciales en todo el árbol de componentes, mire la declaración return del componente principal y envuelva el <div> (o algún otro elemento) que contiene todos los demás componentes. Si ha creado una aplicación compleja, StrictMode inevitablemente detectará algunos errores y los informará a la consola.

Al igual que el componente auxiliar Fragment, StrictMode no representa ninguna interfaz de usuario real. Tampoco afecta los estilos de su aplicación.

React Strict Mode se utiliza para detectar errores en el modo de desarrollo. Una vez que haya limpiado todos los errores y la aplicación esté lista para la producción, puede eliminarla.

Ventajas del modo React Strict

Además de los beneficios obvios de usar StrictMode en React, también puede ser una herramienta útil para aprender a escribir código de mejor calidad.

Protección de los efectos secundarios

Algunos métodos del bucle de vida pueden llamarse varias veces durante la fase de renderizado, por lo que React recomienda que no contengan ningún efecto secundario. Esta recomendación a menudo se pasa por alto, lo que genera un estado incorrecto y pérdidas de memoria que exponen su aplicación a ataques externos. Afortunadamente, el componente auxiliar StrictMode puede ayudarlo a localizar los efectos secundarios dañinos y corregirlos. Y para lograr esto, los métodos de componentes envueltos con StrictMode se llaman a propósito dos veces.

Detectar prácticas obsoletas

Funciones como findDOMNode alguna vez se permitieron en ReactJS, pero ahora están en desuso. Lo mismo ocurre con la API de context, que se ha utilizado mucho en el pasado pero está a punto de eliminarse. StrictMode puede ser una herramienta útil para dar la alarma sobre métodos obsoletos o funciones específicas de React.

Mejores usos para React Strict Mode

Si está trabajando con una base de código que no escribió, StrictMode puede ser una herramienta útil para garantizar la organización adecuada del código, especialmente si un desarrollador sin experiencia escribió la aplicación React.

Encontrar un error en el código JavaScript (vinculado con React) puede ser bastante difícil. Pero envolver el código con StrictMode puede darle algunas ideas sobre lo que podría estar mal.

En general, StrictMode es una de las herramientas más útiles de React. Los desarrolladores novatos pueden usarlo para adquirir el hábito de escribir código que se adhiera a las prácticas recomendadas en React. Cuanto más juegues con el modo estricto, más cómodo te sentirás usándolo.