React.js useDebounce Hook

React.js useDebounce Hook

import { useState, useEffect } from "react";

export default function useDebounce(value: string, delay: number) {
  const [debouncedValue, setDebouncedValue] = useState<string>("");

  useEffect(() => {
    if (value.length === 0) {
      setDebouncedValue(value);
      return;
    }

    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Cancel the timeout if value changes (also on delay change or unmount)
    // This is how we prevent debounced value from updating if value is changed ...
    // .. within the delay period. Timeout gets cleared and restarted.
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

Usage

import useDebounce from "hooks/useDebounce";

const [searchInput, setSearchInput] = useState<string>("");
const debouncedSearchTerm = useDebounce(searchInput, 1500);