Bug: Lag when updating coordinates of div on mousemove about react

[Circkoooooo]

It seems to be related to the new architecture of React18, but I'm not entirely sure. However, there is a workaround available.

Your code may not be the best approach to rendering two components synchronously using useRef and useState. The move event will immediately trigger the ref update, changing the style of the DOM, but setState will not.

workaround

To fix this issue, you should listen to the moveEvent, trigger setState, and then update the ref using setState."

1. listen the moveEvent
2. trigger setState
3. update ref by setState

 const [{ x, y }, setCoords] = useState({ x: 0, y: 0 });
  const ref1 = useRef<HTMLDivElement>(null);

  useEffect(() => {
    document.addEventListener("mousemove", (e) => {
      setCoords({ x: e.clientX, y: e.clientY });
    });
  }, []);

  useEffect(() => {
    if (ref1.current) {
      ref1.current.style.top = y + "px";
      ref1.current.style.left = x + "px";
    }
  }, [x, y]);

[blnvdanil]

@Circkoooooo Thanks for your answer!

I am not exactly sure, but in theory your solution sounds like "make blue square slower, so it wil be synchonous to the red square", but my initial problem (in my project) was that I was using this technic to show some floating element over canvas, the problem begins when you start dragging the canvas and updating floating coordinates, canvas drags without lag, but the floating element has noticable delay.

And this two examples was just to show that there was no difference in updating coordinates with react's useState and using dom element itself.

I tested yur solution, but that does work in my implementation Here is the link: suggested workaround
But, as I said, seems that I just made blue quare a little bit slower, the user expierence become worse :(