DEV Community

Cover image for Top 10 React Hook libraries

Top 10 React Hook libraries

Juraj Pavlović on October 19, 2020

Hooks came and took the React community by the storm. It’s been a while since their initial release, meaning there are a lot of supporting librarie...
Collapse
 
omarkhatibco profile image
Omar Khatib

I would like to suggest another library, I use it on daily basis github.com/streamich/react-use

Collapse
 
jurajuki profile image
Juraj Pavlović

Thank you for sharing!

 
steventhan profile image
Steven Than

Well, then you're too quick to dismiss the awesome feature useLocalStorage brings just because the code snippet doesn't fully demonstrate it 🤷

Imagine if you have 10 components on the page that use the same local storage value. I rather import useLocalStorage than reimplement the mechanism to listen for changes

Collapse
 
steventhan profile image
Steven Than

The 2 code snippets are not equivalent. I don't see how the first one re-renders the component for you?

 
steventhan profile image
Steven Than

Of course you can use those methods on the localStorage object, but then how do you know when to call them so that what's displayed on the screen is in-sync with what's stored?

One can manually attach the onLocalStorageChange event listeners when each component mounts and clean up when they unmount to avoid memory leak. You see this can get tedious, which is why useLocalStorage exists to help: github.com/rehooks/local-storage/b...

I put together a tiny react app here: stackblitz.com/edit/react-5ldn5l. Hopefully, this can highlight some of the features that op left out from the original snippet.

Collapse
 
malloc007 profile image
Ryota Murakami

Thanks @jurajuki for this cool post!
Actually I had only knew use-debounce hook, so I got 9 hooks today! 🤣

BTW I have OSS project that also React hook, I like that coincidence!
Here is my library: github.com/laststance/use-app-state

If you have just a little time, I'm really grad to give me feedback your first impression.
I want to know that is this intuitive for many person?

Anyway thanks your hooks knowledge which is really helpful me! 🤗

Collapse
 
drazik profile image
drazik

I would also suggest react-aria that encapsulates logic to add aria attributes for some common cases/components.

Collapse
 
jurajuki profile image
Juraj Pavlović

Another great suggestion! Thank you.

Collapse
 
pharmokan profile image
pharmokan

usehooks.com/ for more hooks over span of 3 years collecting simple drop-ins sans npm

Collapse
 
noahlaux profile image
Noah Laux

In terms of state handling in a react functional context, I think the hooks API makes things a lot more simple and easier to encapsulate concepts.

However, I agree with you that this could be considered an anti-pattern. Other state handling libraries (either built-in (think Svelte or Vue in their recent incarnations or standalone) use the concepts of stores (readable/writables), which not only overcome the weird hook dances, like rules about where you have to use and declare hooks, leaving you with state handling as just another primitive.

Collapse
 
olsard profile image
olsard

Great, thanks for sharing!

Collapse
 
samirdamle profile image
Samir Damle

Looks like there’s a bug in the code snippet for use-http in addToDo - the result of await post( ... ) should be captured in response and then newToDo needs to be plucked from the response.

Collapse
 
souarikarim profile image
SouariKarim

Great post thank you ! In the first example the 'newTodos' is not defined , consider finxing the bug ! Cheers