Debounce Input Value Hook

use-debounced-input-value.ts

import { useEffect, useState } from "react";

const useDebouncedInputValue = (
  initialValue: string,
  debounceDuration: number = 200
): [string, string, (val: string) => void] => {
  const [currentValue, setCurrentValue] = useState(initialValue);
  const [debouncedValue, setDebouncedValue] = useState(currentValue);

  useEffect(() => {
    let timeout = setTimeout(() => {
      setDebouncedValue(currentValue);
    }, debounceDuration);
    return () => {
      clearTimeout(timeout);
    };
  }, [currentValue, setDebouncedValue, debounceDuration]);

  return [currentValue, debouncedValue, setCurrentValue];
};