Top 10 React Hook Libraries
Recommended React hook libraries in 2021.
React Hooks are a function type that allows you to hook into React state and lifecycle features. This feature was first introduced on React 16.8 update, and since then, it has become an essential part of any React application.
So, as web developers, we should know the best method for implementing React Hooks, and this article will discuss the top 10 React Hook libraries that can be easily used in your next React project.
One thing to keep in mind when using React hooks is that they are composable. That means you should think of them as reusable stateful-logic building blocks that can be used to compose new larger and more complex hooks — just as you would with UI components.
For example, the following hook, use-jokes is a composition of two other hooks, use-local-jokes and use-remote-jokes. It fetches tech jokes from a remote API and manages these jokes in the local storage.
As you can see, these hooks are all exported as independent components. Making them available for reuse/collaboration in other Bit workspaces. Having the two functionalities separated as two independent React hooks, making them far more reusable and composable.
1. React Hook Form
React-Hook-Form is a performance based, flexible library with easy user validations and extensible forms.
Arguably, this is one of the most used Hooks libraries at the moment, and it comes with some amazing features like:
- Minimizes the number of re-renders and faster mounting.
- A small library without any dependencies.
- It can be easily adopted without other dependencies.
- Focuses on user experience.
- Maintainability.
- In-built form validation support.
In addition to all these things, React Hook Form library has around 780,000 weekly downloads and more than 20.5k GitHub stars.
These stats also indicate the usage and popularity of this library, and if you wish to use this library, you can easily download it using npm with npm i react-hook-form command.
The below code shows an example of using custom React Form Hook useForm and you can use their documentation for more details.
2. HookRouter
As your project grows, the need for a formal and convenient routing system becomes more critical. But, you don't need to worry since React has the perfect solution for that.
React HookRouter is a fantastic library that be used to fulfill routing requirements of your application.
Despite being at its early stages, it has some existing features to attract developers. I can easily list down some of them as follows:
- Easy programmatic navigation with
navigate(url, [replace], [queryParams])function. - Handles redirects with the support of the
useRedirect()hook. - Creating custom link components with the use of helper function
setLinkProps(). - Intercepting navigation intents and controlled interceptors.
- Setting a base path to ignore a certain path at the beginning of your URLs with
setBasepath().
Hook Router is the modern alternative to react-router with 4,647 weekly downloads and around 1.3k GitHub stars.
You can easily install HookRouter by running npm i hookrouter and the below example shows a simple usage of HookRouter.
Note: If we use
react-routertypically, lines of code may increase because we have to render the<Route/>component for each route in our app and pass props. It’s now just a matter of importing the Routes part and passing it to theuseRoutesHook.
3. Use-Http
Use-Http is an awesome package that acts as a substitute for the Fetch API.
It is a TypeScript based library, and it allows us to code easily while increasing the readability, with a strong focus on the data usage perspective.
The main features it provides can be listed as follows:
- Supports Server-Side Rendering (SSR) and React-Native
- GraphQL support with
useQueryanduseMutationHooks. - Request/Response interceptors.
- Suspense support.
- Retry functionality.
- Inbuilt caching and persistent caching support
It is currently on version 1.0.20 with 14,418 weekly downloads and 1.8k GitHub stars.
You can install it using npm by running the npm i use-http command and below code shows a simple example of using useFetch hook.
4. UseLocalStorage
UseLocalStorage hook allows us to sync states into local storage to preserve those states during page refreshes.
Using the useLocalStorage Hook, we can smoothly deal with local storage, and it has some interesting features like:
- Supports automatic JSON serialization.
- Synchronization through multiple tabs.
- TypeScript support and Type hinting.
- Includes functionality for updating the component localStorage and triggering a state update external to the component.
This is also a very popular hook library that has around 14,307 weekly downloads with more than 21.9k GitHub stars.
The documentation is well-written and easy to grasp, with plenty of examples.
Installation is easy as always with npm. You just need to run npm i @rehooks/local-storage — save command, and then you can try out the below example.
5. React-Use-Hover
useHover is a state hook in React that specifies whether a React element has hovered.
The hook returns a ref and a boolean value specifying whether the element with that ref hovers at the moment. It simply adds the returned ref into any element whose hover state you’d like to keep track of.
The features it offers are listed below:
- It’s effortless to use and understand.
- The library is small and easy to use.
- It supports TypeScript.
- Provides a delay for the hover effect.
The documentation isn’t as thorough as it should be, but it will teach you how and when to use it effectively.
If we consider stats it has only around 2,339 weekly downloads with 0.5k GitHub stars but it has a lot of potentials if you use it creatively.
You can install it with npm install react-use-hover command and try it out on your own.
6. UseMedia
useMedia is the React sensor hook that tracks the state of a CSS media query.
Have you ever needed a way to keep track of the media queries in CSS? The use-media hook takes a straightforward solution to the issue as media queries are extremely critical for the responsiveness of any application or website.
This hook includes features like:
- TypeScript support.
- The library comes with good documentation that describes how to use the hook and how to test it.
useMedia hook has over 96,000 weekly downloads along with 415 GitHub stars and currently on version 1.4.0.
You can install it using npm by running the npm install --save use-mediacommand, and the below code shows a simple example of using useMediahook.
7. React Recipes
React-recipes is a hook library with a large number of custom Hooks.
It includes Hooks for using browser APIs, managing states, running async code, and bringing us a lot of features that React doesn’t offer out of the box. It’s also important to note that it’s a library very detailed and well-documented.
react-recipeshas more than 46.58k total downloads so far and 470 GitHub stars.
You can install React-recipes with npm i react-recipes --save command, and the below example shows how to implement useSpeechSynthesis to allow your browser to speak.
8. UseDebounce
useDebounce is a lightweight hook that is used to debounce the object.
You can use this hook to debounce any rapidly changing value. It is frequently used in inputs and forms that fetch data, and it is used to delay function execution.
It offers features like:
It might be among one of the most used React hook libraries with 398,202 weekly downloads and around 1.4k GitHub stars.
You can check this hook by installing it with npm i use-debounce — save command.
9. Redux Hooks
React Redux includes its own custom hook APIs, which allow your React components to subscribe to the Redux store and dispatch actions.
In your React components, it is suggested to use the React-Redux hooks API as the default method. The existing connect API is still working and will be supported in the future, but the hooks API is more straightforward, simpler, and performs well with TypeScript.
The following are the most significant Redux Hooks:
useSelector-Using a selector function lets you extract data from the Redux store state.useDispatch-This hook returns a reference to thedispatchfunction from the Redux store. You can use it to dispatch actions as required.useStore-This hook returns a reference to the same Redux store, not frequently used.
It has more than 20.9k GitHub stars which shows how popular it is in the React community.
The documentation is beneficial — a little complicated at times, but it will give you all the details you need to get started with them.
10. UsePortal
React Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
Dropdowns, modals, notification popups, tooltips are all simple to create with usePortal. It also allows for the existence of elements outside of the application’s DOM hierarchy.
In terms of features:
- It has an inbuilt state.
- Support/Written in TypeScript.
- Support Server-side rendering (SSR).
- Allows for complete customization of the portal styles and a variety of other choices.
usePortal is on version number 1.0.14 with around 17,754 weekly downloads and more than 700 GitHub stars.
You can install it using npm by running the npm i -S react-useportal command, and the below code shows a simple example of using usePortalhook.
Final Thoughts
Hooks can perform all the functions that a class component can. They 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.
Apart from the libraries discussed in this article, many react Hook libraries can try out. So, try them out, and let me know what you think in the comments section.
Thank you for reading..!!
