Understanding Hooks in React (P3)

Tram Ho

1. Introduction


In this article, I will introduce to you about Custom Hooks as well as some Hooks that the familiar libraries of React support.

2. React Hook


f. Custom Hook

In addition to using the Hooks that React provided for us as some of which I have introduced before, React also allows us to create our own Custom Hook Hooks or you can understand simply as separate Hooks by yourself. create. Inside the Hooks create this you absolutely can use always the Hook that has provided such React useState , useReducer , useEffect , useMemo , useCallback …. The purpose of creating this Custom Hook as React documents says it will help us:

Building your own Hooks lets you extract component logic into reusable functions.

 

Or is it more accurate in supporting us in splitting the logic into Hooks so we can reuse it more easily or simply trim our components? To create a Custom Hook we will need to create a new function and this function must start with the use keyword as the name of the other React Hook . Because it is a function, of course, we can also accept the parameters we pass and return the results we want. Let’s go to an example as follows, if you go to Medium and choose to read any article will see that every time you scroll down the header of the site will be hidden. Conversely, if you only scroll the mouse on one, the header will immediately be displayed again. Now we will try to build a header with the same function. The code will look like this:

Here I apply the Hook shown in the previous articles, useState and useEffect . Basically the above code you can understand the idea here is:

  • When we scroll down, we will use the style to hide the header by letting it translateY(-100%) , otherwise it will display as the original.
  • This style part we will not have in a local state using useState
  • Next we use useEffect to listen to the scroll scroll event on the page and change the style to suit the event.

The results you can see here: https://codesandbox.io/s/usescrollhook-tceov

With the above code everything is delicious because we achieve the desired goal. However, in case your web has more responsive for mobile and of course also needs the aforementioned features, how do we handle it? Of course, we can simply copy the code and paste it back into the component file of the header for mobile use and usually there is no problem here. 😄 . However, because this is an example, after this code is changed later and there are more style changes than just translateY(-100%) , at this time, you will have to remember to fix both files. Or from the start we can create a Hooks are shared with both mobile and desktop versions. To do this very simply, we will create a new file as follows:

As I said initially the Custom Hook you create must have a name starting with the use keyword. As you can see this is simply a useScrollHook function, it takes no parameters and the result here is an object named style . Here I have copied the entire logic related to changing the style header including the useState and useEffect part of the original component and put into this new function. Now in the Header component we just need to rewrite the following:

As you can see your code is much neater than the original and at the same time in the component for the mobile header, you just need to import the newly created Hook and use it as above. In fact, in my project I also use Custom Hook a lot because I want to try using React’s new technology to see how it works. 😛😛😛 . Personally, I feel that using Custom Hook gives me some benefits such as:

  • Separate the logical part into a separate file to make it compact for the main component. Your component should now only contain most UI-related code.
  • In case you just need to fix the style for that component, you will not have to scroll too much because the logic is no longer in this place but only the UI.
  • In case you need to fix a specific logic, such as the scroll function above, you only need to open the Hook serve that logic instead of scrolling to find the function in charge of this.

Of course, as I said above, your Custom Hook can take any parameter and use it:

Or it can return more than just one result variable, we can return many results and even return a function as follows:

As you can see with the above example, instead of writing a lot of logic related to the login into that component as:

  • Change the input content
  • Validate the input text is valid
  • Send data to the server to login

Now, by splitting into Custom Hooks , our component now accepts only what it needs and the component becomes much more neat.

3. Hook in other popular libraries


a. React Redux

With Hook which offers the React react-redux has also supported us use Hooks with three Hook respectively:

Example of using useSelector() and connect() :

As you can see, the results here are similar and the results are similar if you use useDispatch() .

b. React Router

If before, to get access to information related to the router, all we need to do is wrap our component into the withRouter component. However, in the latest version, React Router has allowed us to access router-related information through a number of Hook as follows:

  • useHistory : allows us to access the object history to be able to perform operations related to changing the url, for example from documents:

  • useLocation : if you simply need to include the content in the current url in the object location , this is the hook you need instead of taking the whole from withRouter . example from documents:

  • useParams : in case your router takes parameters and you want to reuse it in a component, use these hooks. For example:

4. End of lesson


The series of posts related to Hook in my React is here for the end. If you have any questions or find yourself wrong, please comment below to let me know. Thanks for reading and don’t forget to leave an upvote 😄

Share the news now

Source : Viblo