4

Top 10 Awesome React Hooks Libraries

 2 years ago
source link: https://dev.to/ravics1721/top-10-awesome-react-hooks-libraries-1924
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Top 10 Awesome React Hooks Libraries

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK