Function useWatch

useWatch<
    TFieldValues extends FieldValues = FieldValues,
    TTransformedValues = TFieldValues,
>(
    props: {
        compute?: undefined;
        control?: Control<TFieldValues, any, TTransformedValues>;
        defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
        disabled?: boolean;
        exact?: boolean;
        name?: undefined;
    },
): DeepPartialSkipArrayKey<TFieldValues>
Subscribe to the entire form values change and re-render at the hook level.
Type Parameters
- TFieldValues extends FieldValues = FieldValues
- TTransformedValues = TFieldValues
Parameters
- props: {
      compute?: undefined;
      control?: Control<TFieldValues, any, TTransformedValues>;
      defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
      disabled?: boolean;
      exact?: boolean;
      name?: undefined;
  }
  defaultValue, disable subscription and match exact name.
Returns DeepPartialSkipArrayKey<TFieldValues>
Remarks
API • Demo
Example
```
const { control } = useForm();
const values = useWatch({
  control,
  defaultValue: {
    name: "data"
  },
  exact: false,
})
```
- Defined in node_modules/.pnpm/react-hook-form@7.71.1_react@19.2.3/node_modules/react-hook-form/dist/useWatch.d.ts:23
useWatch<
    TFieldValues extends FieldValues = FieldValues,
    TFieldName extends string = FieldPath<TFieldValues>,
    TTransformedValues = TFieldValues,
>(
    props: {
        compute?: undefined;
        control?: Control<TFieldValues, any, TTransformedValues>;
        defaultValue?: FieldPathValue<TFieldValues, TFieldName>;
        disabled?: boolean;
        exact?: boolean;
        name: TFieldName;
    },
): FieldPathValue<TFieldValues, TFieldName>
Custom hook to subscribe to field change and isolate re-rendering at the component level.
Type Parameters
- TFieldValues extends FieldValues = FieldValues
- TFieldName extends string = FieldPath<TFieldValues>
- TTransformedValues = TFieldValues
Parameters
- props: {
      compute?: undefined;
      control?: Control<TFieldValues, any, TTransformedValues>;
      defaultValue?: FieldPathValue<TFieldValues, TFieldName>;
      disabled?: boolean;
      exact?: boolean;
      name: TFieldName;
  }
  defaultValue, disable subscription and match exact name.
Returns FieldPathValue<TFieldValues, TFieldName>
Remarks
API • Demo
Example
```
const { control } = useForm();
const values = useWatch({
  control,
  name: "fieldA",
  defaultValue: "default value",
  exact: false,
})
```
- Defined in node_modules/.pnpm/react-hook-form@7.71.1_react@19.2.3/node_modules/react-hook-form/dist/useWatch.d.ts:51
useWatch<
    TFieldValues extends FieldValues = FieldValues,
    TTransformedValues = TFieldValues,
    TComputeValue = unknown,
>(
    props: {
        compute: (formValues: TFieldValues) => TComputeValue;
        control?: Control<TFieldValues, any, TTransformedValues>;
        defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
        disabled?: boolean;
        exact?: boolean;
        name?: undefined;
    },
): TComputeValue
Custom hook to subscribe to field change and compute function to produce state update
Type Parameters
- TFieldValues extends FieldValues = FieldValues
- TTransformedValues = TFieldValues
- TComputeValue = unknown
Parameters
- props: {
      compute: (formValues: TFieldValues) => TComputeValue;
      control?: Control<TFieldValues, any, TTransformedValues>;
      defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
      disabled?: boolean;
      exact?: boolean;
      name?: undefined;
  }
  defaultValue, disable subscription and match exact name.
Returns TComputeValue
Remarks
API
Example
```
const { control } = useForm();
const values = useWatch({
  control,
  compute: (formValues) => formValues.fieldA
})
```
- Defined in node_modules/.pnpm/react-hook-form@7.71.1_react@19.2.3/node_modules/react-hook-form/dist/useWatch.d.ts:77
useWatch<
    TFieldValues extends FieldValues = FieldValues,
    TFieldName extends string = FieldPath<TFieldValues>,
    TTransformedValues = TFieldValues,
    TComputeValue = unknown,
>(
    props: {
        compute: (
            fieldValue: FieldPathValue<TFieldValues, TFieldName>,
        ) => TComputeValue;
        control?: Control<TFieldValues, any, TTransformedValues>;
        defaultValue?: FieldPathValue<TFieldValues, TFieldName>;
        disabled?: boolean;
        exact?: boolean;
        name: TFieldName;
    },
): TComputeValue
Custom hook to subscribe to field change and compute function to produce state update
Type Parameters
- TFieldValues extends FieldValues = FieldValues
- TFieldName extends string = FieldPath<TFieldValues>
- TTransformedValues = TFieldValues
- TComputeValue = unknown
Parameters
- props: {
      compute: (
          fieldValue: FieldPathValue<TFieldValues, TFieldName>,
      ) => TComputeValue;
      control?: Control<TFieldValues, any, TTransformedValues>;
      defaultValue?: FieldPathValue<TFieldValues, TFieldName>;
      disabled?: boolean;
      exact?: boolean;
      name: TFieldName;
  }
  defaultValue, disable subscription and match exact name.
Returns TComputeValue
Remarks
API
Example
```
const { control } = useForm();
const values = useWatch({
  control,
  name: "fieldA",
  defaultValue: "default value",
  exact: false,
  compute: (fieldValue) => fieldValue === "data" ? fieldValue : null,
})
```
- Defined in node_modules/.pnpm/react-hook-form@7.71.1_react@19.2.3/node_modules/react-hook-form/dist/useWatch.d.ts:106
useWatch<
    TFieldValues extends FieldValues = FieldValues,
    TFieldNames extends
        readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[],
    TTransformedValues = TFieldValues,
>(
    props: {
        compute?: undefined;
        control?: Control<TFieldValues, any, TTransformedValues>;
        defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
        disabled?: boolean;
        exact?: boolean;
        name: readonly [TFieldNames];
    },
): {
    [K in string
    | number
    | symbol]: PathValueImpl<TFieldValues, TFieldNames[K] & Path<TFieldValues>>
}
Custom hook to subscribe to field change and isolate re-rendering at the component level.
Type Parameters
- TFieldValues extends FieldValues = FieldValues
- TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[]
- TTransformedValues = TFieldValues
Parameters
- props: {
      compute?: undefined;
      control?: Control<TFieldValues, any, TTransformedValues>;
      defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
      disabled?: boolean;
      exact?: boolean;
      name: readonly [TFieldNames];
  }
  defaultValue, disable subscription and match exact name.
Returns {
    [K in string | number | symbol]: PathValueImpl<
        TFieldValues,
        TFieldNames[K] & Path<TFieldValues>,
    >
}
Remarks
API • Demo
Example
```
const { control } = useForm();
const values = useWatch({
  control,
  name: ["fieldA", "fieldB"],
  defaultValue: {
    fieldA: "data",
    fieldB: "data"
  },
  exact: false,
})
```
- Defined in node_modules/.pnpm/react-hook-form@7.71.1_react@19.2.3/node_modules/react-hook-form/dist/useWatch.d.ts:137
useWatch<
    TFieldValues extends FieldValues = FieldValues,
    TFieldNames extends
        readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[],
    TTransformedValues = TFieldValues,
    TComputeValue = unknown,
>(
    props: {
        compute: (
            fieldValue: {
                [K in string | number | symbol]: PathValueImpl<
                    TFieldValues,
                    TFieldNames[K] & Path<TFieldValues>,
                >
            },
        ) => TComputeValue;
        control?: Control<TFieldValues, any, TTransformedValues>;
        defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
        disabled?: boolean;
        exact?: boolean;
        name: readonly [TFieldNames];
    },
): TComputeValue
Custom hook to subscribe to field change and compute function to produce state update
Type Parameters
- TFieldValues extends FieldValues = FieldValues
- TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[]
- TTransformedValues = TFieldValues
- TComputeValue = unknown
Parameters
- props: {
      compute: (
          fieldValue: {
              [K in string | number | symbol]: PathValueImpl<
                  TFieldValues,
                  TFieldNames[K] & Path<TFieldValues>,
              >
          },
      ) => TComputeValue;
      control?: Control<TFieldValues, any, TTransformedValues>;
      defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
      disabled?: boolean;
      exact?: boolean;
      name: readonly [TFieldNames];
  }
  defaultValue, disable subscription and match exact name.
Returns TComputeValue
Remarks
API
Example
```
const { control } = useForm();
const values = useWatch({
  control,
  name: ["fieldA", "fieldB"],
  defaultValue: {
    fieldA: "data",
    fieldB: 0
  },
  compute: ([fieldAValue, fieldBValue]) => fieldB === 2 ? fieldA : null,
  exact: false,
})
```
- Defined in node_modules/.pnpm/react-hook-form@7.71.1_react@19.2.3/node_modules/react-hook-form/dist/useWatch.d.ts:169
useWatch<TFieldValues extends FieldValues = FieldValues>(): DeepPartialSkipArrayKey<
TFieldValues,
>
Custom hook to subscribe to field change and isolate re-rendering at the component level.
Type Parameters
- TFieldValues extends FieldValues = FieldValues
Returns DeepPartialSkipArrayKey<TFieldValues>
Remarks
API • Demo
Example
```
// can skip passing down the control into useWatch if the form is wrapped with the FormProvider
const values = useWatch()
```
- Defined in node_modules/.pnpm/react-hook-form@7.71.1_react@19.2.3/node_modules/react-hook-form/dist/useWatch.d.ts:190

Function useWatch

Type Parameters

Parameters

Returns DeepPartialSkipArrayKey<TFieldValues>

Remarks

Example

Type Parameters

Parameters

Returns FieldPathValue<TFieldValues, TFieldName>

Remarks

Example

Type Parameters

Parameters

Returns TComputeValue

Remarks

Example

Type Parameters

Parameters

Returns TComputeValue

Remarks

Example

Type Parameters

Parameters

Returns { [K in string | number | symbol]: PathValueImpl< TFieldValues, TFieldNames[K] & Path<TFieldValues>, >}

Remarks

Example

Type Parameters

Parameters

Returns TComputeValue

Remarks

Example

Type Parameters

Returns DeepPartialSkipArrayKey<TFieldValues>

Remarks

Example

Settings

Returns {
[K in string | number | symbol]: PathValueImpl<
TFieldValues,
TFieldNames[K] & Path<TFieldValues>,
>
}