About Us
IDKBlogs

  All  
Javascript
NodeJS
AngularJS
Angular2+
ReactJS
Others

Create and use the custom hook in react app from scratch

  idkblogs.com      March 28, 2020

Shubham Verma

Shubham Verma


Create and use the custom hook in react app from scratch

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.
                    

Thank you

for taking the time to read this article. If you’re interested in Node.js or JavaScript this link will help you a lot.



Copyright © 2020 IDKBlogs | All Right Reserved

About Us

Powered by : IDKBlogs

Last Update : 19/09/2020