Mi componente React se procesa dos veces debido al modo estricto
Mi componente React se procesa 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?
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 cual puede ser bastante útil).
Si tiene StrictMode habilitado en su aplicación pero no recuerda haberlo habilitado, puede deberse a que utilizó create-react-app o similar para crear su aplicación inicialmente, lo que habilita automáticamente StrictMode de forma predeterminada.
Por ejemplo, es posible que descubras que tu {app} está incluida <React.StrictMode>en tu index.js:
ReactDOM.render(
<React.StrictMode>
{app}
</React.StrictMode>,
document.getElementById('root')
);
Si es así, puedes desactivar StrictMode eliminando la <React.StrictMode>etiqueta:
ReactDOM.render(
{app}
document.getElementById('root')
);
Sí, tienes que eliminar el modo estricto como
El modo estricto no puede detectar automáticamente los efectos secundarios, pero puede ayudarle a detectarlos haciéndolos un poco más deterministas. Esto se hace invocando intencionalmente dos veces las siguientes funciones: constructor de componente de clase, render y métodos shouldComponentUpdate.
Fuente: React Docs: modo estricto
Para los usuarios de Next.js aquí como yo, el modo estricto también está habilitado de forma predeterminada y causa este problema.
Puedes desactivarlo de esta manera.
// next.config.js
module.exports = {
reactStrictMode: false,
}
