debounceHook.js

function useDebounce(value, delay = 500) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    // Set debouncedValue to value (passed in) after the specified delay
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value]);

  return debouncedValue;
}

const Search = ({ onSearch = x => x, ...p }) => {
  const [search, setSearch] = useState("");

  const debouncedSearchTerm = Utils.useDebounce(search, 500);
  useEffect(() => {
    onSearch(search);
  }, [debouncedSearchTerm]);

  return (
    <Input
      {...p}
      placeholder="Search..."
      value={search}
      onChange={e => setSearch(e.target.value)}
    />
  );
};