Published in


Creating Custom React Hooks

Create your own Custom Hooks for enhanced functionality

Creating Custom React Hooks
  • Create Re-usable Logical Block
  • Provide Cleaner and Scalable Code
  • React Custom Hooks can use Other Hooks

Creating Simple React Custom Hook

Let's create a simple Custom React Hook:
  1. The Custom Hook above is returning some values
  2. The Custom Hook can then be Re-used

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

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.
  • 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

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

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.
  • Reduces the complexity of View Component “ApplicationComponent”
  • Custom Hook created is re-usable
  • Business logic has been extracted away from the View Component


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:



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mayank Gupta

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