REACT, have a variable that rolls a num 1-10 and concatenating that variable in return statement in-CodePudding

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;

CodePudding user response：

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:

Class component constructor, render, and shouldComponentUpdate methods
Class component static getDerivedStateFromProps method
Function component bodies
State updater functions (the first argument to setState)
Functions passed to useState, useMemo, or useReducer

CodePudding user response：

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>