Show HN: React-use-fuzzy – React hook in TypeScript for client side fuzzy search
npmjs.com
npmjs.com
- you memoized the instantiation of Fuse (which is cheap), but `searcher.search()` (which is expensive) is performed on every call, even if none of the parameters change.
- the imperative API (`search()` and `resetSearch()`) is not the idiomatic way to write hooks, as the component using the hook would have to call `useFuzzy()`, THEN call `search(currentInputValue)` on every render, which is awkward.
You could fix both by accepting a 3rd `keyword` argument and performing the search within the memoized function.
I would do it in a single useMemo hook like so:
const defaultOptions = { tokenize: true, threshold: 0.2 };
export function useFuzzy<T>(
data: T[],
options: FuseOptions<T>,
keyword: string,
): T[] {
return useMemo(() => {
if (!keyword) return data;
const fuse = new Fuse<T>(data, { ...defaultOptions, ...options });
return fuse.search(keyword);
}, [data, options, keyword])
}
As debouncing would be standard if you're handling user typing, check out one of my favorite hooks: https://usehooks.com/useDebounce
The value is in the fuzzy filtering - which is delegated to another library (Fuse.js) .. so the actual value is just the slight convenience of not having to wrap Fuse in a hook yourself.
As others said, I recommend adding a GitHub pages of a demo or something. Not fun having to spin this up yourself to test what it does/looks like.