Creating Custom React Hooks

Making a reusable react hook for form inputs

Creating your own hooks may seem complicated at first glance but actually they are just gathering some component logic together in order to make a reusable function.

We’ll walk through a demonstration of this by taking a form with two separate onChange events and changing them into our own reusable hook.

First we need to create the form that we’re going to monitor the inputs of. Here is an example of a simple React form, the onChange functions listen for updates to the inputs and the onSubmit handler is fired when the submit button is clicked. If you’re unfamiliar with this set up, the React docs provide lots of useful information on events and forms.

<form onSubmit={onSubmitHandler}>
  <input placeholder="Email" value={value} onChange={onEmailChange} 
  />
  <input placeholder="Password" type="password" value={value}
   onChange={onPasswordChange}/>
  <button type="submit">Submit</button>
</form>

Next we need to define what the onChange functions will do when the inputs update. Below I have used the useState hook to save any changes to the inputs to a state value and then this is displayed as the input value via the value prop.

Using useState to track changes in form inputs

Now we want to extract this duplicated logic out into another function. React Hooks and Components are just functions themselves. When creating your own hook ensure it starts with the work “use” so that the rules of hooks apply to it. This is important as it will stop you using hooks incorrectly by giving warnings if you try to.

We are going to lift the state out of the original form component and put it into its own useInput hook.

import { useState } from "react";
export const useInput = () => {
  const [value, setValue] = useState("");
  const onChange = (e) => {
    setValue(e.target.value)
  };
  return {
    value,
    onChange,
  };
};

Then back in the form component we will set email and password separately to the return value of the useInput hook. Don’t forget to update the email and password input values and onChange events. They should be set to email.value and password.value or email.onChange and password.onChange respectively. The full example is available in CodeSandbox below.

Using object spreading we could make this neater and make the inputs less verbose as the keys within the object exactly match the props of input.

<input placeholder="Email" {...Email} />
<input placeholder="Password" {...Password} />

So what are the benefits of creating your own hook:
- Having reusable functions and reducing the amount of code needed, here we halved the amount of functions on our form
- Getting rid of duplicated code as we don’t need a new onChange function for each input. This is a small example but the effects are quickly compounded the more forms you have in your application
- Extracting logic outside of your components making them less complicated

If you want to look into custom hooks further the React docs have some other examples of creating your own hooks here.

Building Your Own Hooks - React