Skip to content
♥

Watch

Watch component for subscribing to input changes

</> Watch: Component

A React Hook Form component that provides the same functionality as useWatch, but in component form. Instead of using the hook inside another component, you can use <Watch /> directly in your JSX to subscribe to and render form values.

Props

NameTypeDescription
namestring | string[] | undefinedName of the field.
controlObjectcontrol object provided by useForm. It's optional if you are using FormProvider.
computefunction

Subscribe to selective and computed form values.

  • Subscribe to the entire form but only return updated value with certain condition
    const watchedValue = useWatch({
      compute: (data: FormValue) => { 
        if (data.test?.length) return data.test; 
    

        return ''; 
      }, 
    });
  • Subscribe to a specific form value state
    const watchedValue = useWatch({
      name: 'test', 
      compute: (data: string) => { 
        return data.length ? data : ''; 
      }, 
    });
defaultValueunknowndefault value for useWatch to return before the initial render.

Note: the first render will always return defaultValue when it's supplied.
disabledboolean = falseOption to disable the subscription.
exactboolean = falseThis prop will enable an exact match for input name subscriptions.
renderFunctionSubscribes to specified form field(s) and re-renders its child function whenever the values change. This allows you to declaratively consume form values in JSX without manually wiring up state.

Examples:

import { useForm, Watch } from "react-hook-form"


const App = () => {
  const { register, control } = useForm()


  return (
    <div>
      <form>
        <input {...register("foo")} />
        <input {...register("bar")} />
      </form>
      {/* re-render only when value of `foo` changes */}
      <Watch
        control={control}
        names={["foo"]}
        render={([foo]) => <span>{foo}</span>}
      />
    </div>
  )
}

Thank you for your support

If you find React Hook Form to be useful in your project, please consider to star and support it.