3 ms·
It depends what you want. Your current code performs the search synchronously, in which case useEffect would not be useful. You would use useEffect if the searc
by ht85 7y ago
It depends what you want. Your current code performs the search synchronously, in which case useEffect would not be useful. You would use useEffect if the search was done asynchronously, typically in a web worker.
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])
}
That way there is no duplication of the `keyword` variable, and it is now completely owned by the parent, making it much cleaner (especially if you're going to debounce it etc..).
As debouncing would be standard if you're handling user typing, check out one of my favorite hooks: https://usehooks.com/useDebounce https://usehooks.com/useDebounce