How to log the updated count value in react? - reactjs

Question

Why the updated count value is not logged while clicking the button. It always logs the previous count value on button click. Here is the code -
import { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
function updateCount() {
setCount(count + 1);
console.log(count);
}
return (
<div className="App">
<div>
<p>You clicked {count} times</p>
<button onClick={() => updateCount()}>Show alert</button>
</div>
</div>
);
}

Answer 1

on react when your state depends on old state value you must update it like this :
function updateCount() {
setCount(oldCount=>oldCount+ 1);
console.log(count);
}
and you must remember updating the state is not instant action it is super fast, but it take few milliseconds

Answer 2

I am learning React recently and I was facing the exact same problem as you. The reason console.log gives you the previous value as mentioned by Mohammad is because in the same method you are logging and updating the value and they happen together. If you simply put the console.log below the function then it will show you the updated one every time as it finished updating the value before logging.
const incrementCount = (increment) => {
setCount(count + increment);
};
console.log(count);
Hope this helps!

Answer 3

If you want to always log the latest value, you could just do this:
import { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
console.log(count);
function updateCount() {
setCount(prevCount => prevCount + 1);
}
return (
<div className="App">
<div>
<p>You clicked {count} times</p>
<button onClick={() => updateCount()}>Show alert</button>
</div>
</div>
);
}
The reason why in your code the log function logs an outdated value is because of closure - the count value is a const, and it is set when the component is first rendered. So when you click the button, the value of count is not the new value, but the one it was when it was first rendered (i.e. -> always going to be one less than you expect).
In this code, log happens on every re-render. Since clicking the button calls setCount, the state changes, and a re-render occurs. When that happens, the log is executed, and you get the latest value :)

Answer 4

This is the way that the React lifecycle works. The console.log of your value will use the value of count at the time of render.
Render --> Execute ALL functions with the given state values --> Check for state changes --> Render --> Execute ALL functions with the new state values
Each render is with STATIC values.
If you want to see an output to the console of your count, you'll need to use a useEffect.