Watching form changes using react-hook-form

A super helpful react package I am working with is called react-hook-form. It allows you to easily build and validate forms. It is pretty useful. Here I focus on a feature called watch, which is usually not the first thing you would use when starting to use react-hook-form.

Watching input using react-hook-form

Watch

Watch allows you to observe form changes (🤯). It will notify you whenever an input changes. This way you don’t have to wait for the user to submit the form in order to do something.

import React from ‘react’;
import { useForm } from “react-hook-form”;
const UseFormWatchExample = () => {
  const { register, watch } = useForm();
  const title = watch(‘title’)
  return (
    <form>
      <input name=’title’ ref={register()}/>
      <h1>{title}</h1>
    </form>
  );
};
export default UseFormWatchExample

How Does it work

• First, we name our input “title” and register it to the form.
• We then watch input changes using the watch(“title”) statement.
• The title changes every time the user types a letter and then it is displayed inside the h1 tag

Watch API

You can use watch on a single form field (Like I showed in the example), an array of field names or to watch all fields by not passing any parameter to the function. Check out the official documentation for more details.