useForm - watch | React Hook Form - Simple React forms validation

watch: (names?: string | string[] | (data, options) => void) => unknown

This will watch specified inputs and return their values. It is useful for determining what to render.

Rules

When defaultValue is not defined, the first render of watch will return undefined because it is called before register, but you can set the defaultValue as the second argument or provide defaultValues at useForm to avoid this behaviour.
If defaultValues was initialised in useForm as an argument, then the first render will return what's provided in defaultValues.
default value will only get returned in the first invoke before render, the subsequence invocation will always return what's in the inputs.
This API will trigger re-render at the root of your app or form, consider to use callback or useWatch api if that's going to be performance issue for you.

Return

Type	Description	Example	Return
`string`	Watch input value by name (similar to lodash get function)	`watch('inputName')` `watch('inputName', 'value')`	`any`
`string[]`	Watch multiple inputs	`watch(['inputName1'])` `watch(['field1'], { field1: '1' })`	`unknown[]`
`undefined`	Watch all inputs	`watch()` `watch(undefined, { field: '1' })`	`{[key:string]: any}`
`(data: unknown, { name: string, type: string }) => void`	Watch all inputs	`watch((data, { name, type }) => console.log(data, name, type) ))`	`{[key:string]: any}`

CodeSandbox

import React from "react";
import { useForm } from "react-hook-form";

function App() {
  const { register, watch, formState: { errors }, handleSubmit } = useForm();
  const watchShowAge = watch("showAge", false); // you can supply default value as second argument
  const watchAllFields = watch(); // when pass nothing as argument, you are watching everything
  const watchFields = watch(["showAge", "number"]); // you can also target specific fields by their names

  const onSubmit = data => console.log(data);

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input type="checkbox" {...register("showAge")} />
        
        {/* based on yes selection to display Age Input*/}
        {watchShowAge && <input type="number" {...register("age", { min: 50 })} />}
        
        <input type="submit" />
      </form>
    </>
  );
}
import React from "react";
import { useForm } from "react-hook-form";

interface IFormInputs {
  name: string
  showAge: boolean
  age: number
}

function App() {
  const { register, watch, formState: { errors }, handleSubmit } = useForm<IFormInputs>();
  const watchShowAge = watch("showAge", false); // you can supply default value as second argument
  const watchAllFields = watch(); // when pass nothing as argument, you are watching everything
  const watchFields = watch(["showAge", "number"]); // you can also target specific fields by their names

  const onSubmit = (data: IFormInputs) => console.log(data);

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("name", { required: true, maxLength: 50 })} />
        <input type="checkbox" {...register("showAge")} />
        {/* based on yes selection to display Age Input*/}
        {watchShowAge && (
          <input type="number" {...register("age", { min: 50 })} />
        )}
        <input type="submit" />
      </form>
    </>
  );
}