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 = falseEnable exact name matching. When false (default), the subscription fires when the subscribed name is a prefix of the changed field name, or vice versa. Since v7.81.0 When true, it fires when the subscribed field itself or one of its ancestor paths is updated, but not when a nested child path changes. See useWatch for details.
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