
Show HN: React-use-fuzzy – React hook in TypeScript for client side fuzzy search - ph_dev
https://www.npmjs.com/package/react-use-fuzzy
======
ht85
Here's a quick review. I see two obvious issues:

\- 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.

~~~
thepratt
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
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)

------
isuckatcoding
Add a gif demo. That’s the first thing I look for in things like this.

~~~
olejorgenb
Hm, doesn't look like the package is concerned with looks.

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.

------
bluetidepro
Link to the actual repo: [https://github.com/hellojoshuatonga/react-use-
fuzzy](https://github.com/hellojoshuatonga/react-use-fuzzy)

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.

------
yodon
A bit more info in the npm page on usage, benefits, limitations would probably
be helpful (and increase the odds interested devs can find the package when
searching for related concepts).

~~~
jbob2000
It’s a 32 line piece of code that wraps another library so you can use it in
react. Struggling to see the relevance to HN here...

~~~
sombremesa
Some YC startups actually started that way.

