Create and use the custom hook in react app from scratch

3 min readMar 28, 2020

In this article, we will learn what is custom hooks? how to create custom hooks? and how to use this hook in our application?

Read this article for basics of hooks and this article will help to understand more about hooks, I strongly recommend you read these articles first to get the better clarity of hooks.

In this article, we will learn about the custom hooks like What is custom hooks, Where/How to use these hooks?
So let’s start.

Custom hooks:

Custom hooks are nothing but these are javascript functions, while creating a react app, if we have something common logic that we want to share between components then we use custom hooks. These are logic that will be reused in many components. We create a different function and write a shared logic here. We can create hooks using the name start with “use” keyword.

Let’s create a custom hook and in our newly create react app. first, we need to create an app using create react command, let’s follow the given steps:

Step 1: Create an app “hooks-demo” using below command:

npx create-react-app hooks-demo

after successful completion of above command run command

cd hooks-demonpm start

Step 2: Make your app is working:

Open the browser and hit URL http://localhost:3000 and should be displayed the below screen as:

Step 3: Create a file “useOrderCount.js” to write our custom hook logic:
Go to the src folder and create file “useOrderCount.js” to write the code for custom Hook and write the below code:

import { useState } from 'react';function useOrderCountHook() {
   const [orderCount, setOrderCount] = useState({ count: 0 });
   
   const changeOrderCount = () => {
      setOrderCount({ count: orderCount.count + 1 }) 
    }   return { orderCount, changeOrderCount };}export default useOrderCountHook;

Let’s understand the code first:

We are importing “useState” in the below line:

import { useState } from 'react';

Created a hook with name “useOrderCountHook”:

function useOrderCountHook() {
    ...
}

Create a state “orderCount” using useState hook and initialize with an object “{ count: 0 }”:

const [orderCount, setOrderCount] = useState({ count: 0 });

Create a function “changeOrderCount()” to update the state:

const changeOrderCount = () => {
      setOrderCount({ count: orderCount.count + 1 }) 
}

Return the “orderCount” and “changeOrderCount”:

return { orderCount, changeOrderCount };

Export the hook useOrderCountHook:

export default useOrderCountHook;

Now in the above code, we have created our custom hook “orderCountHook”, So let’s use this hook in our app:

Step 4: Use “useOrderCountHook” in our app:

Go to the file src/App.js and delete all codes in file src/App.js and write the below code:

import React from 'react';
import useOrderCountHook from './useOrderCount';
import './App.css';function App() {
   const orderHook = useOrderCountHook();   return (
     <div>
       <h1>count:{orderHook.orderCount.count}</h1>
       <button type='button' onClick
         {orderHook.changeOrderCount}>Increment</button>
    </div>
   );
}export default App;

Step 5: Run the app and see the browser using localhost:3000: