Reactjs – using useRef instead of a setState state variable in a React component when registering eventListeners with a handler that refers to that variable

  const movingRef = useRef(false);

  const handleStartMove = (e) => {
    movingRef.current = true;

    e.stopPropagation();
    // handleMove doesn't take the latest value if we use a state instead of a ref
    document.addEventListener('mousemove', handleMove);
    if (onMoveStart) {
      onMoveStart(e, movingRef.current, angle);
    }

  };

  const handleMove = (e) => {
    e.stopPropagation();
    e.preventDefault();

    if (!movingRef.current) {
      return;
    }
    this.moveDOMElement(e);
  };

I have something like this and I noticed if I replaced movingRef = useRef(false) with const [moving, setMoving] = useState(false), it doesn’t work. It works with refs and I read that useRef changes propagate faster since the callback function "handleMove" takes the cached value of the setState variable moving (or state), instead of taking the latest value, but if you use ref you will always use the latest value. Is this the case?

I heard that this is a closure-related behavior and using a state variable causes synchronization and side effect issues while using refs allows us to avoid that and get what we would expect.