How to trigger a function when cursor stops moving for 3 seconds using react hooks?

Question

I am just exploring hooks but I don't know what logic I have to use in order to trigger a function after cursor stopped moving for 3 seconds

My try

const handleMouseMove = () => {
        console.log('I don't know what to do ???')

    };
    useEffect(() => {
        window.addEventListener("mousemove", handleMouseMove);
        return () => {
            window.removeEventListener("mousemove", handleMouseMove);
        };
    },[]);

Answer 1

let timer = null;

const handleMouseMove = () => {
  if (timer) clearTimeout(timer);
  timer = setTimeout(() => {
    // do your things...
  }, 3000);
};

Append:

in your useEffect callback, you should clear this timer to avoid timeout callback.

useEffect(() => {
  window.addEventListener("mousemove", handleMouseMove);
  return () => {
    window.removeEventListener("mousemove", handleMouseMove);
    if (timer) clearTimeout(timer);
  };
},[]);