import { useEffect, useRef, useState } from "react";

export default function useDebounced(value: any, delay: number) {
  const [timer, setTimer] = useState<any>();
  const [debounced, setDebounced] = useState(value);

  const valueRef = useRef(value);
  useEffect(() => {
    valueRef.current = value;
  }, [value]);

  useEffect(() => {
    clearTimeout(timer);
    setTimer(
      value === debounced
        ? null
        : setTimeout(() => {
            setTimer(null);
            setDebounced(valueRef.current);
          }, delay)
    );
    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return { value: debounced, debouncing: !!timer };
}