Simple Debounce Hook

README.md

See https://stackoverflow.com/questions/52561133/how-to-perform-debounce-on-onchange-react-event

example.js

import * as React from "react";

import useDebounceCallback from "../utils/useDebounceCallback";

const SearchInput = (props) => {
  const [searchValue, setSearchValue] = React.useState("");

  const handleDispatch = useDebounceCallback(() => {
    console.log("dispatch criteria: ${searchValue}");
  }, 1000);

  const handleSearch = (e) => {
    e.preventDefault();
    setSearchValue(e.target.value);
    handleDispatch();
  };

  return (
    <input
      type="text"
      value={searchValue}
      onChange={handleSearch}
    />
  );
};

export default SearchInput;

useDebounceCallback.js

import { useEffect, useRef } from "react";

export default function useDebounceCallback(callback, wait) {
  // track args & timeout handle between calls
  const argsRef = useRef();
  const timeout = useRef();

  function cleanup() {
    if (timeout.current) {
      clearTimeout(timeout.current);
    }
  }

  // make sure our timeout gets cleared if
  // our consuming component gets unmounted
  useEffect(() => cleanup, []);

  return function debouncedCallback(...args) {
    // capture latest args
    argsRef.current = args;

    // clear debounce timer
    cleanup();

    // start waiting again
    timeout.current = setTimeout(() => {
      if (argsRef.current) {
        callback(...argsRef.current);
      }
    }, wait);
  };
}