Top 10 Awesome React Hooks Libraries

Ravi Bharti — Sun, 21 Aug 2022 18:49:35 +0000

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 Docs

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 Docs

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 Docs

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

React hook for value and callback debouncing

5. useHooks-ts

Github Docs

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

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

7. useHttp

Github Docs

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

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 Docs
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

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 A curated resource of react hooks
**React Recieps A React Hooks utility library containing popular customized hooks
component-size React hook for determining the size of a component
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/

DEV Community: Ravi Bharti

Top 10 Awesome React Hooks Libraries

1. React Hooks Form

Features

2. React Use

3. React Query

Features

4. useDebounce

5. useHooks-ts

6. Constate

7. useHttp

Features

8. useMedia

9. rehooks/local-storage

Features

10. React Hanger

Bonus

Conclusion

Credits