React Tutorial- How To Create And Use Own Custom Hook In React JS

How To Create And Use Own Custom Hook In React JS

Friends, in this tutorial, we will learn how to create and use Custom Hook in React application using the default useState() hook.

In React, Hooks are simple functions that allow us to initiate React state. It gives us the freedom to manage the lifecycle of a component.

There are just two paradigms, classes and hooks in terms of a class component in React. Most of us know that hooks don’t work with classes. If we write code in functional components, then only hooks are for us.

 

React offers tons of pre-defined hooks that help manage a functional component’s behavior. Following are the hooks:

• useEffect Hook
• useRef Hook
• useCallback Hook
• useMemo Hook
• useContext Hook
• useReducer Hook

 

It should also be remembered that we can also create our own Custom Hook. Sometimes, we need to manage the behavior of a component.

 

Let’s see how can we build a custom hook and handle its behavior based on our React app requirements.

 

React Js Build And Use Custom Hook Tutorial

Step 1- Set Up React Project

Step 2- Add Bootstrap Package

Step 3- Create Hook File

Step 4- Use Custom Hook

Step 5- Run React Server

 

Let’s learn in detail now:

Step 1- Set Up React Project

First of all, we have to download the new React project for which Node and npm should already be installed on the system.

Then, we go to the terminal app where we write the provided command and run it:

npx create-react-app react-blog

After the new project has been downloaded, we need to go to the project directory:

cd react-blog

 

Step 2- Add Bootstrap Package

The bootstrap library is the best option to choose if we have to develop UI components at quite a high speed.

We have to run the following command to install the bootstrap package:

npm install bootstrap

Afterward, we go to App.js and import the bootstrap path in the file:

import 'bootstrap/dist/css/bootstrap.min.css'

 

Step 3- Create Hook File

In this step, we will make another directory name it hooks in our project directory. In this folder, we will create and keep the custom hook file.

Afterward, we create the useCounter.js file, we have to import the useState hook in this file.

Eventually, we will create a custom function and write the following code to form our own custom hook:

import { useState } from 'react'
export default function useCounter() {
  const [addCount, initCounter] = useState({ counter: 0 })
  const onCounterClick = () => {
    initCounter({ counter: addCount.counter + 1 })
  }
  return { addCount, onCounterClick }
}

 

Step 4- Use Custom Hook

Now, we have successfully created the hook in React. Let’s see how to use the custom hook in the main app js com[ponent.

We need to open App.js file and add the given code to it:

import React from 'react'
import useCounter from './hooks/useCounter.js'
import 'bootstrap/dist/css/bootstrap.min.css'
export default function App() {
  const hookCustom = useCounter()
  return (
    <div className="container mt-5">
      <h2>Build Custom Hook in React</h2>
      <div className="mt-2 mb-3">
        Add counter: <strong>{hookCustom.addCount.counter}</strong>
      </div>
      <div className="d-grid">
        <button
          type="button"
          className="btn btn-dark"
          onClick={hookCustom.onCounterClick}
        >
          Add Counter
        </button>
      </div>
    </div>
  )
}

 

Step 5- Run React Server

Since the counter is ready, we have to test it after running the React development server.

We will have to run the below command from the command prompt in order to start the React app:

npm start

 

Conclusion

In this tutorial, we have seen the demo of building our own custom hook in React. We have created a counter clock hook, where a counter number increases with every click.

We have also learned in this guide how to use a custom hook in React component through this practical code example.

 

Thanks