Create and use the custom hook in react app from scratch

Let’s get started:

Create a custom hook and use it in our app:

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

Step 1: Create an app “hooks-demo”:

In this step we'll create a simple React application using "creaate-react-app" utility, run below command to do the same:

npx create-react-app hooks-demo

After successful completion of above command, navigate the the app directory as:

cd hooks-demo

After this, run below command to start the app:

npm start

Now open the browser and check that your app is working:

Step 2: Check your app is working:

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

Create and use the custom hook in react app from scratch.

After you ensure that your app is working fine, its time do actual work.

Step 3: Write the custom hook logic:

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:

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 the 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;

Let’s understand the above code first:

Import the hook useOrderCountHook in our file (App.js):

import useOrderCountHook from './useOrderCount';

Creating a function component App:

function App() { }

Call the hook “useOrderCountHook” and get the reference in “orderHook”:

const orderHook = useOrderCountHook();

Return HTML to render on the web browser:

                        return (
                            <div>
                              <h1>count:{orderHook.orderCount.count}</h1>
                              <button type='button' onClick
                                {orderHook.changeOrderCount}>Increment</button>
                           </div>
                        );

Export the app:

export default App;

Step 5: Run the app:

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

Create and use the custom hook in react app from scratch.

After clicking on the “Increment” button:

Create and use the custom hook in react app from scratch.

You can see, in the above web page our app is working fine and in this app, we have created a custom hook and used this in our App.js component.
You can use this hook in any component. This hook is reusable.

Conclusion

In this article, we learned about the hooks, custom hooks, how to create custom hook and how to use custom hook in our react hook.