Sé que esto está ocurriendo debido a React.StrictMode, pero estoy muy confundido sobre cómo está ocurriendo exactamente este comportamiento.

Básicamente, tengo un componente muy simple, que registra cada vez que se procesa y también incrementa un contador global cuando lo hace.

 let logCount = 0; function App() { const [count, setCount] = React.useState(0); const incrementCount = React.useCallback(() => setCount(count + 1), [count]); console.log(logCount++, Math.random()); return ( <div> {count} <button onClick={incrementCount}>rerender me!</button> </div> ); } ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.querySelector("#root") );

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>

Cada vez que se vuelve a renderizar el componente, solo veo un archivo console.log, pero logCount se habrá incrementado dos veces . Si apago React.StrictMode, solo se habrá incrementado una vez.

En su mayoría, tengo curiosidad si reaccionar tiene alguna lógica especial para garantizar que las declaraciones de console.log y similares solo se ejecuten una sola vez, incluso en modo estricto. Si no, tengo aún más curiosidad por lo que me estoy perdiendo aquí. Agregué una llamada Math.random() como control de cordura.