Hay un comportamiento extraño cuando se ejecuta ReactJS 17.0.2.
Tengo una función que genera un número aleatorio fuera de un componente. Asigno el valor de retorno de esta función a una constante dentro del componente y luego la console.log . Lo registro y lo muestro en el DOM. Extrañamente los dos son diferentes. Este efecto no ocurre en ReactJS 18.0 y superior, pero aún quiero entender qué está sucediendo aquí.
const randomNum = () => { return 0.5 - Math.random() * 100; }; export default function App() { const randN = randomNum(); console.log(randN); return ( <div className="App"> <p>Random number is: {randN}</p> </div> ); } Esperaría que console.log y DOM muestren exactamente los mismos valores, pero ese no es el caso.
Aquí hay una caja dearena que muestra este comportamiento.
<StrictMode> representa deliberadamente el componente dos veces, y la versión de reaccionar que está utilizando también sobrescribe en secreto console.log durante el segundo procesamiento para silenciar el segundo registro. Entonces, está viendo el registro del primer renderizado y el valor del segundo renderizado.
Para ver la segunda declaración de registro, que coincidirá con lo que hay en el dom, puede hacer esto:
import "./styles.css"; const randomNum = () => { return 0.5 - Math.random() * 100; }; const log = console.log; export default function App() { const randN = randomNum(); log(randN); return ( <div className="App"> <p>Random number is: {randN}</p> </div> ); }Las versiones posteriores de reaccionar ya no interfieren con console.log, ya que causaba confusiones como la suya.