DEV Community

Cover image for @cshooks/usetrie, A React Hook for Typeahead/Autocomplete
Sung M. Kim
Sung M. Kim

Posted on • Originally published at on

@cshooks/usetrie, A React Hook for Typeahead/Autocomplete

Photo by Jamie Street on Unsplash – “trie” is from “Retrieval” thus the cute 🐶 “Retriever”

I’ve released @cshooks/usetrie.

It’s a React Hook for Typeahead/autocompletion.

@cshooks/hooks will be the home 🏠 of Computer Science data structures/algorithms related hooks.

🤔 Why?

When you have a list of texts you want to match by prefix, you have to match each text in an array one by one, which can be time consuming.

Trie is a data structure, which stores text in a tree, which enables a fast prefix look up.

And useTrie works as a facade to enable fast prefix search.

🔧 How?

Check out the README file, which explains the usage in detail.

Here are some quick demo Sandboxes for the impatients.


➕ Additional Info

I’ve created this initially for academic purposes to learn Trie data structure so Trie class is imperative and useTrie hook was forced to fit to work with declarative nature of React as shown below, which is not ideal.

add/remove returns a new instance

I’d really appreciate any feedback on how I can improve the code base.

I will share in the next post what I’ve learned and failures.

And I plan to add other hooks returning Min/Max heaps & Permutations.

🏔 Resources

The post @cshooks/usetrie, A React Hook for Typeahead/Autocomplete appeared first on Sung's Technical Blog.

Top comments (7)

nickytonline profile image
Nick Taylor

Will check out the repo this week Sung. Just back from vacation, so my body is back from the beach but not my brain. 😉

nickytonline profile image
Nick Taylor • Edited

OK, just glanced at the code quickly, so just a few comments about improving the TypeScript code. 😉

interface Children {
   [key: string]: Node;

Can be written using TypeScript's built-in generic Record type.

type Children = Record<string, Node>;
  • For
constructor(public character: string = '') {}

You don't need to specify the string type as it's inferred by the default value ''.

  • For the type for getText, you can create a type and reuse it instead of using (obj: any) => string; in multiple places. Also you could rewrite this type as
<T>(obj: T) => string;

And extend T so that it respects some criteria.

  • For public methods, you don't need to specify the public keyword. It's the default.
  • For type Words = Word[];, I wouldn't bother with this type. Just use Word[].
dance2die profile image
Sung M. Kim • Edited

Those are great tips, Nick 👊

Regarding the public keyword, I was confused coming from C#, in which access modifiers are private by default 😅 (now I know it's public).

And Words does seem unnecessary as Word[] shows the intention (of word being an array type) better 😂.

It seems like I need to get used to built-in types from those tips.

Thank you for providing me a way to improve the code-base, Nick.

Thread Thread
nickytonline profile image
Nick Taylor

No problem. Glad to see you're having fun in TypeScript land. 🎡

Thread Thread
dance2die profile image
Sung M. Kim

Thank you for the warm welcome.
It's been fun & need to unlearn what I know first 😉

thejoezack profile image
Joe Zack

Great job!

dance2die profile image
Sung M. Kim

Thanks, Joe~ 👊