In one of my previous posts, I showed you how to use React’s latest feature that everyone is talking about — React Hooks!

If you have read this post, then you now know how to use the useState, useEffect, and the useContext hooks in your React App.

But real-world apps are not going to be so simple. Eventually, you will need to figure out how to use these hooks together.

When you use two or more basic hooks together, you are creating something called as a custom hook!

In this post, I will show you how to create and use a custom hook in your React App by building something that you have used almost every day in your life! A Form.

Forms are something that are considered easy to build. If you have worked in html, then all you need to do is create a form tag and add a few input tags and a submit type button, and voila! You have a form ready!

<form>

<label>Username</label>

<input type="text"/>

<label> Passworld</label>

<input type="password"/>

<button type="password">Login</button>

</form>

If you create this form, nothing is going to happen. Creating forms is easy, but creating useful forms is difficult.

Let’s start by creating a simple signup form in React and see how we can make it better using React Hooks.

If you would check out the entire source code for this post, then click here: