DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to make Your Own Hook
Jayant
Jayant

Posted on

How to make Your Own Hook

How to make Your Own Hook

What

React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functionalΒ component.

How To make Your Own Hook

If you are using the same Function again and again but with different Names, you can make a Hook So that you don’t have to write the same code over and over again.

Let’s Take the Example a Simple Input Form.


React JS

In this InputForm Component, we are using the handleChange Function Multiple Times with the same Name. So we can make a Hook For this Purpose.

Before Starting making a Hook we have to Think of what are the Re-useable Functions in Input Form.

So generally we have ,

1. onSubmit Function: called when the form is submitted

2. onChange Function: called when the form is changed

3. onReset Function: called inside of the OnSubmit Function

So what our Hook will do, it will takes the Initial Input [Empty string ], set the state using the Initial value , then it will return 3 things

  • state
  • handle Change
  • handle Submit

In the Form of an Array or Object an then we can use it the Component.

UseInputForm Hook

React Hooks

Code

React JS

Follow For More Such Videos 😊

Top comments (0)

DEV

Thank you.

Β 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.