Share some React Custom Hooks I use often

Tram Ho

In this article, I will share some custom-hook functions in reactjs that I write / reference and often apply to my projects, the hook must be too familiar with you to do reactjs, right? no need to introduce more, custom hook is a concept extending from the hook, help us reuse logic between components similar but HOC (Higher order component) or render props, but with a much simpler, Let’s get started.

I. useInputText

like I said in the introduction

custom hook is a hook extending from concept to help us reuse standard logic components.

You will ask the question, so specifically when the logic in the component is reusable, for example, I have the following component :

Above we write a general purpose input component , first the HomePage page:

Everything is pretty good right, next AboutPage page also needs Input

Not good, we will lose a lot of repeated lines of code if this Input is used in many other places, so when do we need a custom hook , I personally define it:

Component uses the same logic, and that logic uses hook

I wonder if it is easy to understand, then now in the above problem I will use the custom hook as follows:
Write a custom hook – here it will be a function , either return a certain value, or not and put the logic that is repeated in that function :

Then replace the looping logic at HomePage and AboutPage with useInputText

Easy to understand, this is the most classic case of custom hook application, you can rely on this to apply quite a lot of other cases.

II. useQueryString && usePushQueryString

The next two custom hooks I often use, because my project has many list screens with classic functions: pagination, filtering, sorting, search =))
It sounds great and there are many features, but it’s also very simple, I usually don’t create a state to save the variables for the above functions, but will push them all to the url , so that there is no need to process anything when the user reloads , like / users? page = 1 & search = deptrai & filter = male . One difficulty is that React Router does not support query string, so it has to write logic to cut it.

Then used in the user list page . , similar to the other list pages.

Above is the hook used to receive data from the url , to update , we use the hook followed by usePushQueryString . Think for a moment, each action (search, filter, set page …) will only change 1 or more values ​​of location.search , assuming the url is / users? Page = 1 & search = deptrai & filter = male , person using such move to page 2, the new url will be / users? page = 2 & search = deptrai & filter = male, similar to the other params. The action would be to write a function , pass an object with changing the url .

Note that usePushQueryString will return a function , take the parameter as an object , following is the usage for the pagination .

III. useScrollToTop

A pretty simple hook , if every time a user visits the page, make sure to scroll to the top, which is quite useful when used on multiple pages.

This hook is made up of 2 notes, and just one more note is available, hihi.

IV. End

During the project, there are many cases where you need to use custom hooks , depending on the requirements of the problem, above I just introduce some basic hooks that can be encountered every day, just see the logic between components using any hook in it (both hook default React as well as the hook of the library, hook our own creation) as you might think to write a custom hook to reusability, help Limit the iteration of code , Hope this article will be useful.

Share the news now

Source : Viblo