useWatch
Subscribe to the entire form values change and re-render at the hook level.
@example
const { control } = useForm();
const values = useWatch({
control,
defaultValue: {
name: "data"
},
exact: false,
})
function useWatch<TFieldValues extends FieldValues = FieldValues>(props: {
defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
control?: Control<TFieldValues>;
disabled?: boolean;
exact?: boolean;
}): DeepPartialSkipArrayKey<TFieldValues>;function useWatch<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: {
name: TFieldName;
defaultValue?: FieldPathValue<TFieldValues, TFieldName>;
control?: Control<TFieldValues>;
disabled?: boolean;
exact?: boolean;
}): FieldPathValue<TFieldValues, TFieldName>;function useWatch<TFieldValues extends FieldValues = FieldValues, TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[]>(props: {
name: readonly [...TFieldNames];
defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
control?: Control<TFieldValues>;
disabled?: boolean;
exact?: boolean;
}): FieldPathValues<TFieldValues, TFieldNames>;function useWatch<TFieldValues extends FieldValues = FieldValues>(): DeepPartialSkipArrayKey<TFieldValues>;
§
useWatch<TFieldValues extends FieldValues = FieldValues>(props: {
[src]defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
control?: Control<TFieldValues>;
disabled?: boolean;
exact?: boolean;
}): DeepPartialSkipArrayKey<TFieldValues>Subscribe to the entire form values change and re-render at the hook level.
@example
const { control } = useForm();
const values = useWatch({
control,
defaultValue: {
name: "data"
},
exact: false,
})
§Type Parameters
§
TFieldValues extends FieldValues = FieldValues
[src]§Parameters
§
props: {
[src]defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
control?: Control<TFieldValues>;
disabled?: boolean;
exact?: boolean;
}- defaultValue, disable subscription and match exact name.
§Return Type
§
DeepPartialSkipArrayKey<TFieldValues>
[src]§
useWatch<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: {
[src]name: TFieldName;
defaultValue?: FieldPathValue<TFieldValues, TFieldName>;
control?: Control<TFieldValues>;
disabled?: boolean;
exact?: boolean;
}): FieldPathValue<TFieldValues, TFieldName>Custom hook to subscribe to field change and isolate re-rendering at the component level.
@example
const { control } = useForm();
const values = useWatch({
control,
name: "fieldA",
defaultValue: "default value",
exact: false,
})
§Type Parameters
§
TFieldValues extends FieldValues = FieldValues
[src]§Parameters
§
props: {
[src]name: TFieldName;
defaultValue?: FieldPathValue<TFieldValues, TFieldName>;
control?: Control<TFieldValues>;
disabled?: boolean;
exact?: boolean;
}- defaultValue, disable subscription and match exact name.
§Return Type
§
FieldPathValue<TFieldValues, TFieldName>
[src]§
useWatch<TFieldValues extends FieldValues = FieldValues, TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[]>(props: {
[src]name: readonly [...TFieldNames];
defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
control?: Control<TFieldValues>;
disabled?: boolean;
exact?: boolean;
}): FieldPathValues<TFieldValues, TFieldNames>Custom hook to subscribe to field change and isolate re-rendering at the component level.
@example
const { control } = useForm();
const values = useWatch({
control,
name: ["fieldA", "fieldB"],
defaultValue: {
fieldA: "data",
fieldB: "data"
},
exact: false,
})
§Type Parameters
§
TFieldValues extends FieldValues = FieldValues
[src]§Parameters
§
props: {
[src]name: readonly [...TFieldNames];
defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
control?: Control<TFieldValues>;
disabled?: boolean;
exact?: boolean;
}- defaultValue, disable subscription and match exact name.
§Return Type
§
FieldPathValues<TFieldValues, TFieldNames>
[src]§
useWatch<TFieldValues extends FieldValues = FieldValues>(): DeepPartialSkipArrayKey<TFieldValues>
[src]Custom hook to subscribe to field change and isolate re-rendering at the component level.
@example
// can skip passing down the control into useWatch if the form is wrapped with the FormProvider
const values = useWatch()
§Type Parameters
§
TFieldValues extends FieldValues = FieldValues
[src]§Return Type
§
DeepPartialSkipArrayKey<TFieldValues>
[src]