use-click-prevention.js

import { useEffect, useRef } from "react";

const noop = () => {};

const useCancelableScheduledWork = () => {
  const cancelCallback = useRef(noop);
  const registerCancel = fn => (cancelCallback.current = fn);
  const cancelScheduledWork = () => cancelCallback.current();

  // Cancels the current sheduled work before the "unmount"
  useEffect(() => {
    return cancelScheduledWork;
  }, []);

  return [registerCancel, cancelScheduledWork];
};

const useClickPrevention = ({ onClick, onDoubleClick, delay = 300 }) => {
  const [registerCancel, cancelScheduledRaf] = useCancelableScheduledWork();

  const handleClick = () => {
    cancelScheduledRaf();
    requestTimeout(onClick, delay, registerCancel);
  };

  const handleDoubleClick = () => {
    cancelScheduledRaf();
    onDoubleClick();
  };

  return [handleClick, handleDoubleClick];
};