Mi React Component se está renderizando dos veces. Entonces, decidí hacer una depuración línea por línea y el problema está aquí
if ( workInProgress.mode & StrictMode) { instance.render(); }React-dom.desarrollo.js
¿Es por el modo estricto? ¿Puedo desactivarlo? ¿Qué es el modo estricto? ¿Lo necesito?
Sí, tienes que eliminar el modo estricto como
El modo estricto no puede detectar automáticamente los efectos secundarios, pero puede ayudarlo a detectarlos haciéndolos un poco más deterministas. Esto se hace mediante una doble invocación intencional de las siguientes funciones: constructor de componentes de clase, render y métodos shouldComponentUpdate.
Fuente: React Docs: modo estricto
StrictMode representa los componentes dos veces (en desarrollo pero no en producción) para detectar cualquier problema con su código y advertirle sobre ellos (lo que puede ser bastante útil).
Si tiene StrictMode habilitado en su aplicación pero no recuerda haberlo habilitado, puede deberse a que usó create-react-app o similar para crear su aplicación inicialmente, lo que habilita automáticamente StrictMode de manera predeterminada.
Por ejemplo, puede encontrar que su {aplicación} está envuelta por <React.StrictMode> en su index.js:
ReactDOM.render( <React.StrictMode> {app} </React.StrictMode>, document.getElementById('root') ); Si es así, puede desactivar StrictMode eliminando la etiqueta <React.StrictMode> :
ReactDOM.render( {app} document.getElementById('root') );Parece que el componente se renderiza dos veces, pero el primer componente renderizado no está desmontado. Al menos ese es el comportamiento que estoy viendo con React 17, podría haber un error en mi código, por supuesto.