Why do we need custom hooks?
The answer is we don’t and we do. It depends. If you want to make your code more concise and neat, adopting custom hook may help you.
There are so many new concepts and techniques emerging in the software world. Sometimes, I sometimes ignore and avoid them on purpose.
Custom hook was one of them, but not any more to me.
I used React for a year and now I got to understand what custom hooks do and why they are useful.
First of all, take a look at what the official document says.
Building your own Hooks lets you extract component logic into reusable functions. “by ReactJS official document”
This is what it says “extract component logic into reusable functions”. I did not understand what it meant for a year. But as I gte familar with React, I gradually understood. Let me define custom hook in my version.
A Custom hook is a function taken out from a component to make it reusable by other components. “By me”
This is my own definition. It is more verbose, but I think it makes more sense, at least to me. The most important part is that custom hook is just a function even though it is somewhat special in that react hooks such as useState, or useEffect can be used inside the custom hook.
I believe that the best way to explain a concept is to do it by an example. Even though I do not think custom hook is a complex concept at all, I came up with a really good example.
It is a “password validator” in text input. The password validator checks something like whether user’s password is longer than 8 characters or includes the predetermined number of capital letters or special keys before a user submits his or her authentication data to the server.
Password validation is a logic that almost every project needs. So once it is created, it can be shared across other your projects. That is why I think it is the best fit for explaining the concept of custom hook. .
A password input field without custom hook
OK. We have a password input field working nicely. As soon as the length of password in the input field becomes greater than 8, the button is activated.
However, we can improve the code by taking out the functions(logics) embedded in the App component.
Password input field with custom hook
Let me show you the App with the same functionality, but with a custom hook , usePasswordValidation(). As I kept saying, I separated the function(logic) that check if password length is greater than 8 in usePasswordValidation() from the component(App).
This is custom-hook version of password input. I took out the logic out of the component. Now the usePasswordValidation can be in a separate file or published into package manager such as npm, and then reused by other components either in the same project or other project.
The code below is a bit more improved code. I moved the custom hook, usePasswordValidation to a new file, usePasswordValidation.js. And I added another validation logic to check if the password has at least one capital letter. You can add more and more logic to the hook.
OK. I hope I helped you be more close to understanding the custom hook. Thanks for reading.
