Creating Custom React Hooks

Create your own Custom Hooks for enhanced functionality

Mayank Gupta
Dec 24, 2019 · 4 min read
Creating Custom React Hooks

Technofunnel presents another article on Custom Hooks that can be created in React to add further functionality to the program. In this article, we will be creating a simple Custom React hook and will try to understand the dynamics behind the creation and usage of custom Hooks.

The main intent of Custom Hooks are:

  • Separate Logic from User Interface
  • Create Re-usable Logical Block
  • Provide Cleaner and Scalable Code
  • React Custom Hooks can use Other Hooks

Hooks are a great addition to the React programming. We have many inbuilt React hooks which are used to perform a specific task. If you are new to React hooks, you can look for the following articles…

Follow us on our YouTube Page:

Creating Simple React Custom Hook

Let's create a simple Custom React Hook:

https://gist.github.com/Mayankgupta688/c77abd405e2f2ee1dfb40612dfae790f

The above code represents a simple Custom Hooks that return multiple values from it. Following need to be taken note of in the above code:

  1. “use” appended to function name representing Custom Hooks
  2. The Custom Hook above is returning some values
  3. The Custom Hook can then be Re-used

Let's see how the above-created hook can be used in other parts of the application. We can simply call this Hook function and extract the returned data from it. The above hook returns an array containing “userName” and “userDesignation”, let's try using the above custom React Hook Created…

https://gist.github.com/Mayankgupta688/178c884ccf0dd853449ccac51c76c6ef

In the above code, we are using the custom hook created and the values returned from the custom Hook is extracted inside the variables “name” and “designation” inside “ApplicationComponent” Component. The above-created custom hook does not add any lot of value to the application, but it represents the simple custom re-usable component storing some data and returning the data from it.

Passing Parameter to React Hooks

Let's add another piece of code where we will be sending parameters to the Custom Hooks to set up the initial values of the data that need to be returned from the Custom Hook

https://gist.github.com/Mayankgupta688/5d0693b8ebe7c35ace60a2fcbd9db732

In the above code, we are passing the parameter to the hook “useCustomHook”, these parameters can then be used to define some initial data for the component.

You can play around with the above code on the following Url:

The custom react hooks created so far does not make much sense in real-time scenarios. Now let consider some scenarios that represent some real-time scenarios, where the custom react hooks can be created and used.

Using “useState” Hook in React Custom Hooks

Another great feature which Hooks offer is the ability to use other hooks inside the custom hook created. In the sample below, we will be using the “useState” hook inside the custom hook created.

Lets first look for the code…

https://gist.github.com/Mayankgupta688/a4256b1c9fb4d7b97fa45a4fe14034eb

In the above code, the following concepts need to be understood:

  • We have created a custom React Hook “useCustomTimeHooks”
  • The custom hook use “useState” hook internally
  • Custom Hook returns the state variable “time” from it
  • “time” property is retrieved and rendered in the component
  • Custom Hook updates the time every second
  • The “time” property is updated every second in the rendered component

You can play around the code in the below online editor:

The key takeaway from the code above is:

We have created a new Custom Hook which is taking care of updating the “state” data. The “state” variable “time” created, can be used in multiple parts of the application. And the updates to this property are taken care of, by Custom Hook, instead of getting taken care of by the “ApplicationComponent”.

The benefits offered are:

  • The “state” variable “time” is not controlled by the component
  • Responsibility to manage “time” is taken care of, by the Hooks
  • The Updated Time Counter functionality can be re-used.
  • We are dividing the main application into multiple subparts.
  • We are removing Business Logic from the Component

The benefits offered are a reusable component taking care of certain state data in the application and the components using the custom hooks need not take care of the business logic of certain state variables of the Application.

Using “useEffect” Hook in React Custom Hooks

Another aspect to add to the custom hooks is the usage of “useEffect”. “useEffect” can be used in the React application to process some code in React while the component bootstraps or re-renders.

In the component below, we need to display the total number of employees associated, the data for the employee will be extracted asynchronously. We will be creating a custom hook that can take care of extracting the data asynchronously and then update the state variable containing the count of employees in an organization.

You can play around the code in the below online editor:

In the code above, the state variable has been named as “empCount” and the value is maintained by custom Hook named as “useEmployeeCountHooks”. The component displayed on the Application “ApplicationComponent”, use the available “useEmployeeCountHook” to manage and update the value of employee count once data is available asynchronously.

The benefit offered from the above code are:

  • “ApplicationComponent” is not responsible for managing “empCount”
  • Reduces the complexity of View Component “ApplicationComponent”
  • Custom Hook created is re-usable
  • Business logic has been extracted away from the View Component

Closure:

Create Custom Hooks to reduce the complexity of the View Components. Hooks are an amazing addition to React and must be learned, understood, and used. For more such articles, please don't forget to follow me:

TechnoFunnel

TechnoFunnel focus on learning and understanding the programming concepts

TechnoFunnel

We are focussed towards learning different technologies like React, Angular, Machine Learning, Python, Golang and AWS. Follow us for detailed conceptual understanding of these technologies and Interview Preparations.

Mayank Gupta

Written by

9 Years of Experience with Front-end Technologies and MEAN Stack. Working on all Major UI Frameworks like React, Angular and Vue https://medium.com/technofunnel

TechnoFunnel

We are focussed towards learning different technologies like React, Angular, Machine Learning, Python, Golang and AWS. Follow us for detailed conceptual understanding of these technologies and Interview Preparations.