The code has no transition, no setTimeout, no nothing that would indicate any delay. The dot should always be right under the cursor. This will happen with every similar UI pattern (want to resize something, move a slider, etc. etc.)
I guess this is a result of tradeoffs React has to do by insulating people from DOM.
There's probably some way to force immediate DOM update, but then you're pulling in a lot of useless diffing and checking for each frame, instead of just updating the single el.style.something property you'd do when directly using DOM API and leaving the browser to do the rest.
https://react.dev/learn/updating-objects-in-state
https://megous.com/dl/tmp/zyrzbzjqxccvvdniorpj.webm
(Top of the line desktop AMD chip.)
The code has no transition, no setTimeout, no nothing that would indicate any delay. The dot should always be right under the cursor. This will happen with every similar UI pattern (want to resize something, move a slider, etc. etc.)
I guess this is a result of tradeoffs React has to do by insulating people from DOM.
There's probably some way to force immediate DOM update, but then you're pulling in a lot of useless diffing and checking for each frame, instead of just updating the single el.style.something property you'd do when directly using DOM API and leaving the browser to do the rest.