Top 10 Awesome React Hooks Libraries
Tags: react, reacthook, javascript, webdev
Published: 2022-08-21 18:49:35

Hooks in React has been life-changing for React developers they provide a simple elegant way to write code that is more readable and maintainable. There are only a few handfuls of hooks provided by React depending on our use case we create custom hooks.

Before creating our own custom we can look up to following react hooks libraries that help in the project.

### 1. React Hooks Form
 [_**Github**_](https://github.com/react-hook-form/react-hook-form)   [*Docs*](https://www.react-hook-form.com/)

React Hooks for form state management and validation (Web + React Native). It reduces the amount of code you need to write while removing unnecessary re-renders.

#### Features
- Built with performance, UX, and DX in mind
- Embraces native HTML form validation
- Out-of-the-box integration with UI libraries
- Small size and no dependencies
- Support Yup, Zod, AJV, Superstruct, Joi, Vest, class-validator, io-ts, nope, and custom build



### 2. React Use
[*Github*](https://github.com/streamich/react-use)  [*Docs*](https://usehooks.com/)

React use has a collection of essential React Hooks for managing devices sensors, UI controls, animations, side-effects, Lifecycle, State, and more 

### 3. React Query
[*Github*](https://github.com/TanStack/query) [*Docs*](https://tanstack.com/query/)

Hooks for fetching, caching, and updating asynchronous data in React. It has declarative, always-up-to-date auto-managed queries and mutations that directly improve both your developer and user experiences
#### Features
- Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
- Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
- Parallel + Dependent Queries
- Mutations + Reactive Query Refetching
- Multi-layer Cache + Automatic Garbage Collection
- Paginated + Cursor-based Queries
- Load-More + Infinite Scroll Queries w/ Scroll Recovery
- Request Cancellation
- React Suspense + Fetch-As-You-Render Query Prefetching
- Dedicated Devtools
 ...

### 4. useDebounce
[*Github*](https://github.com/xnimorz/use-debounce)

React hook for value and callback debouncing

### 5. useHooks-ts
[*Github*](https://github.com/juliencrn/usehooks-ts)  [*Docs*](https://usehooks-ts.com/)

It has a lot of hooks for many of the handful use cases of the application lifecycle, Here are some of the following: `useCopyToClipboard()` `useDarkMode()` `useEventListener()` `useIsMounted()` `useMap()` `useSsr()` `useStep()` and many more.

### 6. Constate
[*Github*](https://github.com/diegohaz/constate) 

It let create local states using React Hooks and use it as a React Context only when needed with minimum effort

### 7. useHttp
[*Github*](https://github.com/ava/use-http) [*Docs*](https://use-http.com/#/)

It is an awesome package that is used as the replacement of Fetch API

#### Features
- SSR (server-side rendering) support
- TypeScript support
- 2 dependencies (use-ssr, urs)
- GraphQL support (queries + mutations)
- Provider to set default URL and options
- Request/response interceptors
- React Native support
- Aborts/Cancels pending HTTP requests when a component unmounts
- Built in caching
- Persistent caching support
- Suspense(experimental) support
- Retry functionality

### 8. useMedia
[*Github*](https://github.com/streamich/use-media)

React sensor hook that tracks the state of a CSS media query. It takes a straightforward solution to the issue as media queries are extremely critical for the responsiveness of any application or website

### 9. rehooks/local-storage
[*Github*](https://github.com/rehooks/local-storage) [*Docs*](https://rehooks.github.io/local-storage/)
React hook for enabling synchronization with local storage.
#### Features 
- Automatic JSON serialization
- Synchronization across multiple tabs
- Synchronization across multiple tabs
- Type hinting via TypeScript

### 10. React Hanger
[*Github*](https://github.com/kitze/react-hanger)

Set of helpful hooks, for specific to some primitives types state changing helpers
react-hanger is a library that has some React Hooks that let us more easily manage various kinds of states. Here are some following Hooks: `useInput`  `useBoolean` `useNumber` `useArray` `useOnMount` `useOnUnmount` and many more...


## Bonus
- [**awesome-react-hooks**](https://github.com/rehooks/awesome-react-hooks) A curated resource of react hooks
- [**React Recieps](https://github.com/craig1123/react-recipes) A React Hooks utility library containing popular customized hooks
- [**component-size**](https://github.com/rehooks/component-size) React hook for determining the size of a component
- [**online-status**](https://github.com/rehooks/online-status) React hook for subscribing to online/offline events and the navigator.onLine property to see the current status
 


## Conclusion
Hooks are reusable, clean, and simple functions that can be incorporated into your workflow. They offer us many options for a diverse range of uses, so we don’t have to build them from scratch.

There are also many more hooks libraries out there, I have only selected which are most popular and maintained, if I have missed any good libraries, write them down in the comment section. 

Thank you for reading..!!

### Credits
 - Cover Photo by Rachel Claire: https://www.pexels.com/photo/brown-rope-and-a-metal-cargo-hook-6750210/