Create and use the custom hook in react app from scratch

  Shubham Verma      March 28, 2020


Create and use the custom hook in react app from scratch

Let's create and use the custom hook in react

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.

In this article, we will learn how to create custom hooks? and how to use this hook in our application? we will learn about the custom hooks like What is custom hooks, Where/How to use these hooks?
Hooks are introduced in React 16.8 and after. The hooks let you use state and other React features without writing a class.


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

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:

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:

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

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

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.
                    

Support our IDKBlogs team


Welcome to IDKBlogs.

If our contents help you and you learned from this platform, please consider supporting what we do.

Thank you.




Strongly Recommended Books For You:

Reading books opens the door to allow in more lights, If we want to know a man of rare intellect, try to know what books he/she reads.

For India:

For Other Countries (United States, United Kingdom, Spain, Italy, Germany, France, Canada, etc)


Thank you

I appreciate you taking the time to read this article. The more that you read, the more things you will know. The more that you learn, the more places you'll go. If you’re interested in Node.js or JavaScript this link will help you a lot.

If you found this article is helpful, then please share this article's link to your friends to whom this is required, you can share this to your technical social media groups also. You can follow us on our social media page for more updates and latest article updates.
To read more about the technologies, Please subscribe us, You'll get the monthly newsletter having all the published article of the last month.



Funny Programming | Idkblogs.com | Shubham Verma

👈

Enjoyed this moment?