Manage forms with custom React hook

Managing your form state in a ReactJs application can be a challenging & tedious job. You might have many forms in your application and class-based components. You can’t write reusable code due to the different states in different forms, so your component size will increase, and readability will decrease over time.

A simple form to collect user details using a custom hook.

React team announced🎉 the concept of hooks in 2018 with React 16.8. React introduced hooks to overcome many problems that developers were facing with class-based components. One of them is unable to write reusable stateful logic. Custom React Hooks solved this problem.

A custom Hook is a JavaScript function whose name starts with ”use”.

Let's write a custom hook to manage all forms in an application:

If you want to follow along with the examples, make sure to configure a React development environment.

Step 1: Create a new React project with create-react-app.

npx create-react-app manage-forms-with-hooks

(You should have one of the latest version of Node.js for running npx).

Step 2: Write a simple form with JSX.

In the above snippet, I have added 4 input fields to collect the user’s first name, last name, email address, account type and a button to save these details.

Step 3: Create a useFormHandler.js file to write your custom hook.

In useFormHandler.js, we need a state to store all form data and a handleChange method to collect data onChange event and return both values and handleChange. There will be different input fields in different forms, so is one state enough? Yes, we will store all input field values in a single object and update them whenever the user changes in any input fields.

For this to work, we need two data from onChange event

1. event.target.name to get the input field name.
2. event.target.value to get the user input.event.target.value.

Let’s begin — development :

I have imported useState hook from the ReactJs library in the above snippet to use the state in the functional component. In line 6, I am storing the previous state value in newValues variable and performing an update on newValues. Then storing newValues into the state using setValues method. This custom hook is returning values And the handleChange method as onChange.

Step 4: Let’s import our custom hook into the JSX form we developed.

In the above snippet, I have imported useFormHandler.

Do I have to name my custom Hooks starting with “use”? Please do. This convention is very important. Without it, we wouldn’t be able to automatically check for violations of rules of Hooks because we couldn’t tell if a certain function contains calls to Hooks inside of it.
source — ReactJs official documentation

I have called the custom-hook like any other hook. The process is absolutely the same. I have passed the onChange method and values[`name of the input`] to each input field, and with the click of the save button, I’m getting the form data like this from formValues.values.

output of console.log(formValues.values)
{ firstname: “Bikram”, lastname: “Bhattacharya”, email: “abc@xyz.com”, account-type: “individual” }

Step 5: How to set Initial values to our form.

To set initial values, we have to pass the initial values while calling custom-hook in our component.

const formValues = useFormHandler({ firstname: "Bikram", lastname: "Bhattacharya", email: "abc@xyz.com", account-type: "individual" });

Conclusion

Thank you for reading this post! I hope it helped you manage your form state in a better way using your own custom React Hooks.

Please feel free to comment or hit me up on Twitter or LinkedIn if you have any thoughts to share with me!