Why is React using the wrong value in useState? - reactjs

Question

I have a React component like so:
https://codepen.io/darajava/pen/NWrdWeP?editors=0010
function TestUseState() {
const [count, setCount] = useState(0);
const buttonRef = useRef(null);
useEffect(() => {
buttonRef.current.addEventListener("click", () => {
alert(count);
});
setCount(10000);
}, []);
return (
<div ref={buttonRef}>
Click
</div>
)
}
I set up an event listener on the button and it seems to take the initial value of the state, after setting it directly afterwards. Is this expected behaviour? How can I avoid this?
The actual code in question (not valid, only relevant parts added):
const Game = () => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const [player, setPlayer] = useState<IPlayer>();
const setPosition = (newPos) => {
console.log(player); // <--- player is undefined on mousemove
};
useEffect(() => {
canvas = canvasRef.current;
ctx = canvas.getContext('2d');
canvas.addEventListener('mousemove', (e: MouseEvent) => {
setPosition(getCursorPosition(canvas, e));
});
}, []);
return (
<canvas ref={canvasRef} styleName="canvas" />
);
}

Answer 1

Yes this is expected, but I can understand why it seems strange.
When you are adding the ref in the useEffect hook you are closing over the value of count and saving it for later, so when you click the sub it shows you the value when the component was initialized.
If you want to alert the actual value of count you can add onClick={()=>alert(count)} to the div, this is also more in following the declarative style of React.
You are discouraged to use refs in React because React maintains a virtual dom. You use refs when you need to access dom elements directly.
Edit: You can also use this for the mouse move event:
https://reactjs.org/docs/events.html#mouse-events
Write the handler function separately in the body of the functional component and pass it to canvas element's onMouseMove prop.