Top React Hooks — Arrays and Inputs

Image for post
Image for post
Photo by Alonso Reyes on Unsplash

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

React Hooks Lib

React Hooks Lib is a library that has many reusable React hooks.

To install it, we can run:

Then we can use the hooks that come with the library.

The useList hook lets us create a state array and manipulate it.

For instance, we can write:

The useList hook takes an array as the argument.

This is used as the initial value of the list state.

The returned object also has the sort and filter methods to let us sort the list array.

The useFetch hook lets us make HTTP requests to a server.

For instance, we can write:

We created our own getUrl function that returns the full URL for our requests.

useField is a hook that takes the default value of the input box.

value has the value of the input.

bind has the props for the input to bind the input onChange function to update the parameter of getUrl .

When we click the button, we call setUrl to set the URL.

This is one of the methods returned by the useFetch hook.

Once it’s set, the request will be made, and the data property has the response body.

loading has the loading state.

The useHover hook lets us track the hover status of an element.

To use it, we can write:

to use the useHover hook.

We pass the bind object to the div as its props to watch its hover state.

Then we get the hover state with the hovered property.

We can use the useField to help us handle input data easily and bind it to a state.

For instance, we can write:

We use the useField hook with an initial value for the input.

The returned object has the value with the inputted value.

bind is an object with the onChange and value properties that let us handle the input values and set it to a state.

Image for post
Image for post
Photo by Vidar Nordli-Mathisen on Unsplash

Conclusion

React Hooks Lib lets us manipulate arrays and bind input values easily.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store