Change in state not displaying in console log - reactjs

Question

I am building a simple timer app and keeping track of elapsed time in state using hooks. I know I am setting state correctly because it displays in the app every passing second. However, when I console log elapsedTime, it repeatedly logs the initial state (0 in this case):
const Timer = () => {
const [elapsedTime, setElapsedTime] = React.useState(0);
const [totalTime, setTotalTime] = React.useState(0);
const handleStart = () => {
const startTime = Date.now();
setInterval(() => {
const et = Math.floor((Date.now() - startTime) / 1000);
setElapsedTime(et);
console.log(elapsedTime);
}, 1000);
};
const handleStop = () => {
clearInterval();
};
return (
<div className='container'>
<div className='timer'>
<div className='title'></div>
<div className='time'>{elapsedTime}</div>
<button onClick={handleStart}>Start</button>
<button onClick={handleStop}>Stop</button>
</div>
</div>
);
};
ReactDOM.render(<Timer />, document.getElementById("root"));
<div id="root"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
Why is my change in state not being reflected in the console.log I call on line 9?

Answer 1

setState is asynchronous, you won't see the changes in the scope of the function
If you want to see the new values at the place where you put the console.log you can only do console.log(et);
You can also use a useEffect to see the changes of the variable in the console
useEffect(() => {
console.log("elapsedTime", elapsedTime);
}, [elapsedTime]);

Answer 2

Because of javascript clojure, elapsedTime on line 9 will always reference the value it had when the function was created.

Answer 3

how would you go about stopping the timer?
You have to have a reference to the timer you're creating so that you can stop it. A call to setInverval returns such a reference (a unique ID).
Then you have to make sure you only have a single timer running at any point in time.
Borrowing Marc Charpentier's answer, your working version of the code could look like this:
const Timer = () => {
const [elapsedTime, setElapsedTime] = React.useState(0);
const [totalTime, setTotalTime] = React.useState(0);
const [timerId, setTimerId] = React.useState();
React.useEffect(() => {
console.log("elapsedTime", elapsedTime);
}, [elapsedTime]);
const handleStart = () => {
const startTime = Date.now();
if (timerId === undefined) { // make sure that a timer is not already running
setTimerId(
setInterval(() => {
const et = Math.floor((Date.now() - startTime) / 1000);
setElapsedTime(et);
}, 1000)
);
}
};
const handleStop = () => {
clearInterval(timerId);
setTimerId(undefined);
};
return (
<div className='container'>
<div className='timer'>
<div className='title'></div>
<div className='time'>{elapsedTime}</div>
<button onClick={handleStart}>Start</button>
<button onClick={handleStop}>Stop</button>
</div>
</div>
);
};
ReactDOM.render(<Timer />, document.getElementById("root"));
<div id="root"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>