My top 5 favourite React Hook libraries

A juniors advice give it a try.

I have been in contact with React for nearly 10 months and my opinion is that React hooks not only make code cleaner but also improves readability and reduces the amount of the code. For juniors like me who dont have much experience, getting started is not difficult.

If you havent used hooks yet, you should try and add them to your project, because it can really make your programming simple and interesting.

In this blog, I would like to share 5 React hook libraries with you which I tried in some projects.

1. useMedia

This hook provides a simple way to track CSS media queries and it plays a vital role in responsive websites, it is helpful for rendering different components at different viewports.

For example, you might have a hamburger icon which you want to show with a dropdown list field only on smaller screens, but hide them on larger screens. useMedia provides a quick solution to help solve this problem.
Code example:

Resize the screen and trigger different content.

2. React-hook-form

Link

No one likes to create and recreate complex forms with validation, including React developers.

React-hook-form is a hook about forms:

Performant, flexible and extensible forms with easy-to-use validation

With its simpler syntax, speed, less re-rendering, and better maintainability, it started to reach the top in GitHub.

To use react-hook-form, we only need to call the useForm hook, when we do this, we will get an object from which we will deconstruct the register property.

Register is a function, it will accept the input value entered by the user and verify it, it will also pass each value to a function, which will be called when the form is submitted, so we need to connect it to each input as a ref.

In order for register to work properly, we need to provide an appropriate name attribute for each input. For example, for user name input, its name is username, the reason for this is that when we submit the form, we will get all the input values on a single object.
Code Example:

The attributes of each object will be named according to the input name attribute we specified.

In order to handle submitting the form and receiving input data, we will add an onSubmit to the form element and connect it to the local function of the same name.

From useForm, we will get a function named handleSubmit, we wrap it around onSubmit as a higher-order function, the handleSubmit function will be responsible for collecting all the data entered into each input, and we will receive an object named data in onSubmit.
Code Example:

With console.log(data), we can see what we entered in each input of the same attribute.

To validating the form and adding constraints for each input value, we only need to pass the information to the register function.

The first attribute is required. By default, it is set to false, but we can set it trueto ensure that the form is not submitted when the form is not filled out.

To apply this verification, username value is required, we can set the value length greater than 6 characters but less than 24 characters.

If we use number for this input (assuming this input is about the age of a person), we will use the attributes min and max instead of minLength and maxLength.

3. React router

Link
React router is one of the most popular React libraries, it is used for routing and obtaining application URL history records.

The most eye-catching hooks provided are:

• useHistory
• useLocation
• useParams
• useRouteMatch

Its name speaks for itself:

useHistory will get the method of application history data.
Code Example:

Click on the button, page will be navigated to home page.

useLocation will return an object representing the current URL.

Trigger a new page view event whenever a new page loads.

UseParams will return the object of the key-value pairs of the URL parameters of the current route.

In this way, with : id you can access the parameters of the current routes URL.

useRouteMatch will try to match the current URL with the given URL, which can be a string or an object with different options.

match is an object which contains current path, url

4. Redux hooks

Link
Redux is used as a global state manager throughout the application. A few months after the Hook was released by the React community, Redux added Hook support. This Hook can be used to replace the previous high-level component method connect().

The most eye-catching hooks provided are:

• useSelector
• useDispatch
• useStore

useSelector allows you to extract data from the Redux store state, using a selector function, may return any value as a result, not just an object.

useDispatch returns a reference to the dispatch function from the Redux store. You may use it to dispatch actions as needed.

useStore returns a reference to the same Redux store that was passed into the component.

My personal opinion is, the documentation is good but a bit complicated, to start using it, you still have to read the documentation, until now Im only in the elementary stage.

5. usePortal

Link
usePortal makes it easy to create drop-down menus, modal boxes, notification pop-up windows, bubble prompt boxes, etc
It provides a way to create elements outside the DOM hierarchy of the application.
Code Example:

With Open button you can open Portal with a Close Portal button, hit ESC or click outside to close it.

The examples above is just my personal suggestion. I have added a link below each hook title where you can directly refer to the original site, if you find anything that can be improved or corrected, please contact me.

Thank you very much for reading!