In the process of learning react and just building a simple number guessing game for practice purposes
In my code, I have a component named 'Game' with 'const roll = Math.floor(Math.random() * 10 + 1)' to roll a random number between 1-10 and verifying the roll by console.log so I can see the number displayed on the console.
I then use {roll} in my return statement which is later instantiated on my App.js file (App.js is not shown below)
The only thing is that the random number rolled when using console.log(roll) is different vs the number being rendered on screen in my return statement 'The number rolled is {roll}'
Why is this? I never had this issue in vanilla JavaScript but it seems like the roll is happening twice instead of taking the initial value in 'const roll'
Can anyone explain why this is the case and how to fix this problem? Thanks for any help I can get
import React, {useState} from "react";
const Game = () => {
const roll = Math.floor(Math.random() * 10 + 1);
console.log(roll);
const guess = () => {
let inputGuess = document.querySelector('.input');
console.log(inputGuess.value);
}
const [lives, setLives] = useState(5);
return (
<React.Fragment>
<h1 className='header'>Guess the number!</h1>
<p className='roll'>The number rolled is <strong>{roll}</strong></p>
<p className='lives'><strong>{lives}</strong> lives remaining</p>
<p className='message'>Enter a number between 1-10</p>
<input type='text' className='input'></input>
<button className='guess' onClick={guess}>Guess</button>
</React.Fragment>
)
}
export default Game;
In dev mode, React intentionally invokes function component bodies (and other lifecycle methods) twice to help identify side-effects:
Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:
to add to the answer by ray hatfield
You should consider, that your roll variable will be re-declared (and therefore be a new random number) on every render. The component will re-render whenever the lives state is updated, and whenever the parent-component re-renders.
To prevent the re-assignment of the roll variable you should place it in its own useState hook.
Try:
const Game = () => {
const roll = Math.floor(Math.random() * 10 + 1);
const [roll2, setRoll] = React.useState(Math.floor(Math.random() * 10 + 1));
console.log('Without useState: ', roll);
console.log('With useState: ', roll2);
const guess = () => {
let inputGuess = document.querySelector('.input');
console.log(inputGuess.value);
}
const [lives, setLives] = React.useState(5);
return (
<React.Fragment>
<h1 className='header'>Guess the number!</h1>
<p className='roll'>The number rolled is <strong>{roll}</strong></p>
<p className='lives'><strong>{lives}</strong> lives remaining</p>
<p className='message'>Enter a number between 1-10</p>
<input type='text' className='input'></input>
<button className='guess' onClick={guess}>Guess</button>
</React.Fragment>
)
};
const App = () => {
console.log('re-rendering App');
const [state, setState] = React.useState(0);
// we are faking an update to the parent component
React.useEffect(() => {
setInterval(() => setState((prev) => ++prev), [2000]);
}, []);
return <div><Game /></div>;
}
ReactDOM.render(<App />, document.getElementById('app'));<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
<div id="app"></div>