debounce as xhr call using hooks

useDebounce.js

import React from "react";

const useDebounce = (callbackFn: () => any | Promise<any> , timeout: number = 500) => {
  const [sends, setSends] = React.useState(0);

  const debounceRequest = () => {
    setSends(sends + 1);
  };
  
  React.useEffect(() => {
    if (sends > 0) {
      const id = window.setTimeout(() => {
        callbackFn();
        setSends(0) 
      }, timeout);
      return () => {
        return window.clearInterval(id);
      };
    }
  }, [callbackFn, sends, timeout]);

  return {
    debounceRequest,
  };
};

export default useDebounce;