Skip to content

Watch

React component that subscribes to form input changes.

</> Watch: WatchProps Since v7.65.0

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(s) to subscribe to. (The deprecated names prop is still accepted for backwards compatibility, but will be removed in a future major version — use name instead.)
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 : ''; 
      }, 
    });
defaultValueunknownFallback value returned before the form has mounted and no current value exists yet. Once the form is mounted, the actual current form value takes precedence over this fallback.
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}
        name={["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 starring and supporting it.

Edit