How to Create and Use Custom Hooks in React

A comprehensive dive into understanding what custom hooks are in React.js and how to create one

Photo by author

Introduction

React provides a few hooks that can be used within a functional component to manage the state, make API calls and do some other things. Some examples of these hooks are useState, useContext, useReducer, useCallback, useMemo, useRef.

Today our focus won’t be on these built-in hooks, instead, we are going to look at how you can create your hooks and use them in your React.js application.

We are also going to look at why you need to create your hooks. So at the end of this tutorial, you will be able to create your own custom hooks and also know some of the principles of creating a custom hook. So, let’s get started

Definition of React Custom Hooks

A custom hook is simply a JavaScript function, whose name begins with the prefix “use”.

From this definition you should be able to take two things, the first thing is that a custom hook is a JavaScript function, and the second thing you should understand is that the name of a custom hook must begin with the prefix “use”.

So whenever you want to create a custom hook you have to begin its name with the prefix “use”.

A custom hook is also able to call other hooks if the need arises.

So, if it is required that when building your custom hooks, you have to call some of the built-in hooks, then you can do so.

Most of the questions young developers ask are why they even need to build their custom hooks.

Custom hooks are used just like HOCs, they are used for sharing logic between two or more components. If you are familiar with what HOCs are, then you can think of custom hooks as the same.

The point here is that custom hooks are used for sharing logic between components.

So, over the next two sections, I am going to show you how to create a custom hook in React with the help of two examples.

Create a Custom Hook to use the Document title

Alright, so far, we have seen and have gotten a better understanding of what custom hooks are in React and why we need to create one.

In this section, we are going to see how to create a custom hook in React by creating our very first custom hook because I believe in learning by doing. It is not just enough that we know the functions of custom hooks and what they are, it will be nice also if we can create one for ourselves.

To begin with, let me describe what the hook we are about to create will do. We are going to create a hook that will simply update the title of our document based on a counter value in the UI.

So, let’s begin. To start with I have already created the React application for this project by running

npx create-react-app projectName

Inside the src folder create a folder and call it Components. Inside the Components folder create a file componentDoc.js, and then finally create a functional component with a count state initialized to zero and a button that will increment the count value by one when a user clicks on the button

The next step is to import this component in App.js and return it like this:

If you save the files and head over to the browser, you should see the text ‘count’ displayed alongside the count value and a button that increments the count value when clicked.

But what we want right now is to dynamically change the title of the document based on the count value.

So, whenever there is a click on the button, the document title should display the count value.

Well to do this we can simply implement the useEffect hook in our ComponentDoc component like this

Remember to import the useEffect hook at the top, now if you head back to the browser, you should see “you clicked 0 times” displayed as the document’s title, and when you click on the button the document title also changes.

Well in as much as this works perfectly well, in cases where we have to implement the same effect on multiple components like 5 to 10 components, it is obvious that this method will bring about code duplication because we will be required to make use of the useState and useEffect hooks in these components, this is where we make use of the custom hook.

As I rightly said from the beginning custom hook help in sharing logic between components without having to duplicate codes, by creating our custom hook we can share the logic of the useEffect hook within the components that require it without having to import and use the hook within them, to do this let’s create a new folder in the src folder and call it hooks, within the folder create a new file and call it useDoc.js, we are going to create our custom hook inside this file, but before we proceed I want you to remember the rules of creating a custom hook that we have, that our custom hook must begin with the prefix “use” as this will help React.js differentiate between a regular functional component and a custom hook function.

So, within the useDoc.js file write the code below to create your custom hook, remember to import the useEffect hook as this will be used for causing side effects (changing the document’s title).

Here what we simply did was use the useEffect hook to create a custom hook that can be used in any component in our application to dynamically change the title of our document’s page based on the state of the count variable.

Notice also that we passed in the count variable as a prop, this is because it is required for our custom hooks functionality.

The next step to take is to import and call this hook in the ComponentDoc component, and remove the useEffect hook from it like this:

Now if you save both files and check out the browser, you should still see the UI displayed like before, and also the document’s title still corresponds to what we have in the useDoc hook, and on click of the button, the state changes, and also the document’s title changes.

With this, you can update the state of your document’s title dynamically, the only difference here though is you are doing this with a custom hook that can be called anywhere in your application. So, if you have a component that requires changing the document title you can call this hook.

With this approach, you can avoid the repetition of codes in your application.

Conclusion

The use of hooks in React made it possible for developers to create a functional component with states. Before introducing hooks, functional components required the use of state management tools like redux to implement state management logic.

To even make things better developers can now create their hooks, making it possible for them to share logic between components of their application avoiding code repetition.

So, in this article I talked about what custom hooks are in React, I talked about the need to have a custom hook in React, I talked about the rules necessary to create a custom hook in React and finally, I showed two examples of how to create a custom hook in React.

Thanks for staying around I hope you enjoyed it see you next time