3 ms·
For the 2nd point: would you suggest a useEffect hook that has a dependency on the search key? With the current search() call replaced with an update of the sea
by thepratt 7y ago
For the 2nd point: would you suggest a useEffect hook that has a dependency on the search key? With the current search() call replaced with an update of the search key state.
- ht85 7y agoIt 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