useFuse.ts

import useDebounce from "react-use/lib/useDebounce";
import { useMemo, useState, Dispatch, SetStateAction } from "react";
import Fuse, { FuseOptions } from "fuse.js";

export default <T>(
  data: ReadonlyArray<T>,
  fuseOptions: FuseOptions<T>,
  debounce: number = 500
): [ReadonlyArray<T>, string, Dispatch<SetStateAction<string>>] => {
  const [filteredData, setFilteredData] = useState(data);
  const [query, setQuery] = useState("");
  const fuseSearch = useMemo(() => new Fuse(data, fuseOptions), [
    data,
    fuseOptions
  ]);
  useDebounce(
    () => setFilteredData(query ? fuseSearch.search(query) : data),
    debounce,
    [query, data, debounce]
  );

  return [filteredData, query, setQuery];
};