React state shows old value right after setState

Question

const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  console.log(count); // prints old value
}

why? I literally just set it

Tanvi Kulkarni · Answer

setCount doesn't change the `count` variable you have, it asks React to re-render with a new value. Your handleClick is still running with the `count` from the current render, so it logs the old one. The new value shows up in the next render.

If you need the new value right away just compute it:
const next = count + 1;
setCount(next);
console.log(next);

Sneha Reddy · Answer

related: calling setCount(count + 1) twice in the same handler only adds 1. use setCount(c => c + 1) if you need that

Kavya Nair · Answer

ohh ok. thank you both

React state shows old value right after setState

3 answers

Related questions

Want the full explanation, not just an answer?