Custom Hooks in React
In this blog, we will be going through custom hooks in React and understand their importance by building our own custom hooks. I am assuming you’re already aware of React Hooks and have already used built-in React hooks before. If not, I would suggest going through “React Hooks” before continuing with this article.
A custom Hook is a JavaScript function whose name starts with “use” and that may call other Hooks.
A custom hook is like a normal function and a developer can decide what it should take as arguments, and what it should return. Every time we use a custom Hook in a component, all states, and effects inside of it will be fully isolated.
The name of the custom hook should always start with “use”. This important convention is used to enforce the “Rules of Hooks” to custom hook.
Building a custom hook lets us extract the stateful logic of a component and encapsulate that logic into a cleaner and reusable functional component. Thereby allows us to remove logic from the UI layer, and prevent code duplication by bringing common use cases to reusable hooks which can then be re-used across multiple components.
Application set-up
The application that we’re going to develop will have two buttons Signup and Login. On clicking of each button, a corresponding modal will open which is going to have the respective input fields. We will add validation to each field. The validation will be a very basic one, like checking for ‘@’ for email and length for other fields, as our main purpose for this example is to understand custom hooks.
We will also see if there is any scope for us to create custom hooks from the logic that we are going to have in our components.
Now let’s create the components for our application.
App.js
We will create a component called CustomModal for the modal, making use of the material-UI Modal component. Our custom component will accept a few props — open, onClose, and modalContent.
CustomModal.js
Now let’s add the components for sign-up and login flow.
Signup.js
Login.js
SignupForm.js
LoginForm.js
Our SignUp and Login components have a state called modalStatus, for modal open/close, and a method called toggleModal, for setting the modalStatus state.
const [modalStatus, setModalStatus] = useState(false);
const toggleModal = () => setModalStatus(!modalStatus);As we can see, this piece of logic is duplicated in both components, so there’s a scope to extract it to a custom hook.
Also, our logic to define states for input fields and the fields’ on change method ‘handleOnChange’ is duplicated in both SignupForm and LoginForm components. So, there is another scope for us to remove this duplicated logic from both the components and build another custom hook.
Building Custom Hook
We are going to extract the duplicated stateful logic from both SignUp and Login components and create a custom hook called useModal. Also, we are going to return the modalStatus state and toggleModal method from it.
useModal.js
Before we create a custom hook for duplicated stateful logic for SignupForm and LoginForm components, it will be a good separation of concerns, if we move the initial states for form fields to constants.
So let’s create a constants.js file and move our initial states of both the components.
constants.js
Now we can proceed with the creation of a custom hook called useForm and move our ‘handleOnChange’ method to it.
Our hook will be accepting an argument called formFields, which it will use to define the states and their initial values. We will return fields and handleOnChange from our useForm hook. The fields will be the states of the input fields and handleOnChange will be the method we are going to call on change of each input field from our components.
useForm.js
Using Custom Hook
Now that we have created our custom hooks, we can use them in any components we require. To use our custom hook, we just need to import it, call it, and use the states and methods that we have returned from the custom hook.
After importing the useModal hook, and calling it, we can use the modalStatus state to hide or show the modal and the toggleModal method to set modalStatus state.
Our updated SignUp and Login components will look like -
SignUp.js
Login.js
Also after importing the useForm hook, and calling it, we can use the fields state for our input fields and bind handleOnChange method to the onChange of our input fields.
Our updated SignupForm and LoginForm components will look like -
SignupForm.js
LoginForm.js
(Click here for the complete codebase and demo of the application)
Conclusion
As we can see, by creating custom hooks in our application we have achieved readability of code, avoidance of code duplication, and separation of concerns which are important principles of software development. Also, custom hooks cover a wide range of use cases like animation, form handling, timers, encapsulating fetch calls, and many more.
So it is encouraged to build custom hooks as much as possible whenever there is scope to build them and use them based on the requirements.
That’s it for my blog on Custom Hooks. I hope you find it useful. Thanks for reading!
I’m a front-end developer, passionate about exploring and learning the latest technologies in the front-end domain. Apart from that I love hiking, playing football, and spending time with my family.
