GTKX

API Reference / @gtkx/forms / useWatch

Function: useWatch() ​

Call Signature ​

useWatch<TFieldValues, TTransformedValues>(props): DeepPartialSkipArrayKey<TFieldValues>

Defined in: node_modules/.pnpm/react-hook-form@7.86.0_react@19.2.8/node_modules/react-hook-form/dist/useWatch.d.ts:23

Subscribes to all form value changes and re-renders at the hook level.

Type Parameters ​

TFieldValues ​

TFieldValues extends FieldValues = FieldValues

TTransformedValues ​

TTransformedValues = TFieldValues

Parameters ​

props ​

DefaultValue, disabled subscription, and exact name matching.

compute? ​

undefined

control? ​

Control<TFieldValues, any, TTransformedValues>

defaultValue? ​

DeepPartialSkipArrayKey<TFieldValues>

disabled? ​

boolean

exact? ​

boolean

name? ​

undefined

Returns ​

DeepPartialSkipArrayKey<TFieldValues>

Remarks ​

API • Demo

Example ​

tsx
const { control } = useForm();
const values = useWatch({
  control,
  defaultValue: {
    name: "data"
  },
  exact: false,
})

Call Signature ​

useWatch<TFieldValues, TFieldName, TTransformedValues>(props): FieldPathValue<TFieldValues, TFieldName>

Defined in: node_modules/.pnpm/react-hook-form@7.86.0_react@19.2.8/node_modules/react-hook-form/dist/useWatch.d.ts:51

Custom hook to subscribe to field changes and isolate re-rendering at the component level.

Type Parameters ​

TFieldValues ​

TFieldValues extends FieldValues = FieldValues

TFieldName ​

TFieldName extends string = FieldPath<TFieldValues>

TTransformedValues ​

TTransformedValues = TFieldValues

Parameters ​

props ​

DefaultValue, disabled subscription, and exact name matching.

compute? ​

undefined

control? ​

Control<TFieldValues, any, TTransformedValues>

defaultValue? ​

FieldPathValue<TFieldValues, TFieldName>

disabled? ​

boolean

exact? ​

boolean

name ​

TFieldName

Returns ​

FieldPathValue<TFieldValues, TFieldName>

Remarks ​

API • Demo

Example ​

tsx
const { control } = useForm();
const values = useWatch({
  control,
  name: "fieldA",
  defaultValue: "default value",
  exact: false,
})

Call Signature ​

useWatch<TFieldValues, TTransformedValues, TComputeValue>(props): TComputeValue

Defined in: node_modules/.pnpm/react-hook-form@7.86.0_react@19.2.8/node_modules/react-hook-form/dist/useWatch.d.ts:77

Custom hook to subscribe to field changes and use a compute function to produce state updates.

Type Parameters ​

TFieldValues ​

TFieldValues extends FieldValues = FieldValues

TTransformedValues ​

TTransformedValues = TFieldValues

TComputeValue ​

TComputeValue = unknown

Parameters ​

props ​

DefaultValue, disabled subscription, and exact name matching.

compute ​

(formValues) => TComputeValue

control? ​

Control<TFieldValues, any, TTransformedValues>

defaultValue? ​

DeepPartialSkipArrayKey<TFieldValues>

disabled? ​

boolean

exact? ​

boolean

name? ​

undefined

Returns ​

TComputeValue

Remarks ​

API

Example ​

tsx
const { control } = useForm();
const values = useWatch({
  control,
  compute: (formValues) => formValues.fieldA
})

Call Signature ​

useWatch<TFieldValues, TFieldName, TTransformedValues, TComputeValue>(props): TComputeValue

Defined in: node_modules/.pnpm/react-hook-form@7.86.0_react@19.2.8/node_modules/react-hook-form/dist/useWatch.d.ts:106

Custom hook to subscribe to field changes and use a compute function to produce state updates.

Type Parameters ​

TFieldValues ​

TFieldValues extends FieldValues = FieldValues

TFieldName ​

TFieldName extends string = FieldPath<TFieldValues>

TTransformedValues ​

TTransformedValues = TFieldValues

TComputeValue ​

TComputeValue = unknown

Parameters ​

props ​

DefaultValue, disabled subscription, and exact name matching.

compute ​

(fieldValue) => TComputeValue

control? ​

Control<TFieldValues, any, TTransformedValues>

defaultValue? ​

FieldPathValue<TFieldValues, TFieldName>

disabled? ​

boolean

exact? ​

boolean

name ​

TFieldName

Returns ​

TComputeValue

Remarks ​

API

Example ​

tsx
const { control } = useForm();
const values = useWatch({
  control,
  name: "fieldA",
  defaultValue: "default value",
  exact: false,
  compute: (fieldValue) => fieldValue === "data" ? fieldValue : null,
})

Call Signature ​

useWatch<TFieldValues, TFieldNames, TTransformedValues>(props): { [K in string | number | symbol]: PathValueImpl<TFieldValues, TFieldNames[K] & Path<TFieldValues>> }

Defined in: node_modules/.pnpm/react-hook-form@7.86.0_react@19.2.8/node_modules/react-hook-form/dist/useWatch.d.ts:137

Custom hook to subscribe to field changes and isolate re-rendering at the component level.

Type Parameters ​

TFieldValues ​

TFieldValues extends FieldValues = FieldValues

TFieldNames ​

TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[]

TTransformedValues ​

TTransformedValues = TFieldValues

Parameters ​

props ​

DefaultValue, disabled subscription, and exact name matching.

compute? ​

undefined

control? ​

Control<TFieldValues, any, TTransformedValues>

defaultValue? ​

DeepPartialSkipArrayKey<TFieldValues>

disabled? ​

boolean

exact? ​

boolean

name ​

readonly [TFieldNames]

Returns ​

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

Remarks ​

API • Demo

Example ​

tsx
const { control } = useForm();
const values = useWatch({
  control,
  name: ["fieldA", "fieldB"],
  defaultValue: {
    fieldA: "data",
    fieldB: "data"
  },
  exact: false,
})

Call Signature ​

useWatch<TFieldValues, TFieldNames, TTransformedValues, TComputeValue>(props): TComputeValue

Defined in: node_modules/.pnpm/react-hook-form@7.86.0_react@19.2.8/node_modules/react-hook-form/dist/useWatch.d.ts:169

Custom hook to subscribe to field changes and use a compute function to produce state updates.

Type Parameters ​

TFieldValues ​

TFieldValues extends FieldValues = FieldValues

TFieldNames ​

TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[]

TTransformedValues ​

TTransformedValues = TFieldValues

TComputeValue ​

TComputeValue = unknown

Parameters ​

props ​

DefaultValue, disabled subscription, and exact name matching.

compute ​

(fieldValue) => TComputeValue

control? ​

Control<TFieldValues, any, TTransformedValues>

defaultValue? ​

DeepPartialSkipArrayKey<TFieldValues>

disabled? ​

boolean

exact? ​

boolean

name ​

readonly [TFieldNames]

Returns ​

TComputeValue

Remarks ​

API

Example ​

tsx
const { control } = useForm();
const values = useWatch({
  control,
  name: ["fieldA", "fieldB"],
  defaultValue: {
    fieldA: "data",
    fieldB: 0
  },
  compute: ([fieldAValue, fieldBValue]) => fieldB === 2 ? fieldA : null,
  exact: false,
})

Call Signature ​

useWatch<TFieldValues>(): DeepPartialSkipArrayKey<TFieldValues>

Defined in: node_modules/.pnpm/react-hook-form@7.86.0_react@19.2.8/node_modules/react-hook-form/dist/useWatch.d.ts:190

Custom hook to subscribe to field changes and isolate re-rendering at the component level.

Type Parameters ​

TFieldValues ​

TFieldValues extends FieldValues = FieldValues

Returns ​

DeepPartialSkipArrayKey<TFieldValues>

Remarks ​

API • Demo

Example ​

tsx
// Can skip passing down the control into useWatch if the form is wrapped with FormProvider
const values = useWatch()