React is a great framework. It is now dominating the front-end world. Hooks make React even greater. Hooks like useState, useEffect and useRef are helping us build a SPA faster and its codes to be shorter. There is one more thing that even make React "greaterer". It is custom hooks.
Did you know that you can create your own hooks by combining built-in hooks? When I first heard of the concept of making my own hooks, I could not grasp the concept of them
The best way for me to understand the concept of custom hooks was to learn by a simple, but practical example. In this post, I would like to introduce a very simple, but practical use case of a custom hook, useAuthInputValidation, which I have created and named.
As the name implies, its purpose is to validate a user’ inputs such as username and password entered in a sign-up or login form . You have probably encountered such cases where you want to validate a user’s authentication input before he or she actually submits them in the client-side.
For example, you may want to restrict a user from submitting sign-up information until the user’s password length is greater than 7 characters or until the user’ username is in an email format.
Using the custom hook, useAuthInputValidation, you can turn on and off the the sign-up button depending on users’ input. Of course that can be done without a custom hook. But with the custom hook, it is better.
Now, let's talk about code.
I will present you two sign-up forms with and without custom hook. The two forms have the same components, two text-inputs and one button and the same functionality. They take two value, username and password from a user and the validation runs as soon as the user changes the values. Only when the username is in an email format like xxxxx@xxxx.com and the password length is greater than 7, the button is enabled.
The below is the sign-up form without the custom hook.
There are 3 states, username, password and enableButton. The Boolean state of enableButton, whose initial value is false, is dependent upon the other two states. That is, only after the two conditions that “username must be an email format” and “password length must be greater than 7” are met, the value of enabledButton changes to “true”, turning on the button.
Now, I would like to show the same sign-up form with custom hook, useAuthInputValidation.
What I have done so far is to comment out useEffect() and enableButton useState() parts. And I move them inside useAuthInputValidation(). By doing so, I separated the validation logic from the SignUpForm component. Now the validation logic can be located in anywhere and shared by other component such as LoginForm.
You probably noticed that the custom hook is just a function that takes parameters, processes the parameters using built-in hooks like useEffect and useState, and returns a value or values. It exactly sounds like a regular function because it is. The pros of using custom hooks are the following two.
1)Simplicity: It separates a logic from your components, which makes your codes shorter and more readable.
2)Reusability: The separated logic can be shared by other components that use a similar logic.
The two pros all derived from modularization of components. In my opinion, simplicity is more feasible especially for those who just started hooks because it is quite difficult to build a custom hooks thinking of its re-usability in the future. Once you made a custom hook, just store it in a separated folder. You may find a good change to reuse the hook later.
Therefore I recommend trying to use custom hooks as many as possible even though you think the hooks would never be reused for now.
Thank you for reading my post. I hope this help you understand how good custom hook is.
