Why does the watch function have a default value?

[guppy0356]

Why does the watch function have a default value?

const [checkbox, name] = watch(['checkbox', 'name'], { checkbox: false, name: 'Joshua' })

It seems unnecessary since we can set default values with the defaultValues option in the useForm function.

const {
  register,
  handleSubmit,
  watch
} = useForm<Form>({
  defaultValues: {
    checkbox: true, // we can use defaultValues option here
    name: 'sam'
  }
});

[BrendanC23]

It's only useful if you don't provide the default values when you call useForm. In your example, you don't need to include it.

[guppy0356]

@BrendanC23

Thank you for your response. I provide default values in wath only, but I can't see default values in my form 🤔

[guppy0356]

This is my sample component. I can't see 'Joshua' in my browser. I think default values in watch function is other meanings.

import { useForm } from 'react-hook-form';

type Form = {
  name: string,
  checkbox: boolean
}

let renderCount = 0;

function App() {
  renderCount++;

  const {
    register,
    handleSubmit,
    watch
  } = useForm<Form>();

  watch(['checkbox', 'name'], { checkbox: false, name: 'Joshua' })

  return (
    <>
      <p>{renderCount}</p>
      <form onSubmit={handleSubmit((d) => console.log(d))}>
        {/* <input type="checkbox" { ...register("checkbox"), ...object } /> */}
        <input type="checkbox" { ...register("checkbox") } />
        <input {...register("name")} />
        <input type="submit" />
      </form>  
    </>
  )
}

export default App

[BrendanC23]

The default value used in watch will only affect the values returned by watch, not the default values displayed in the input. If you want a default value for the form, you can use value when calling register or provide them when calling useForm.

The default values when calling watch only prevent undefined from being returned. See this CSB.

When defaultValue is not defined, the first render of watch will return undefined because it is called before register. It's recommended to provide defaultValues at useForm to avoid this behaviour, but you can set the inline defaultValue as the second argument.

[guppy0356]

@BrendanC23

The default value used in watch will only affect the values returned by watch, not the default values displayed in the input.

Okay. I understand. Thank you for your response 😄 By the way, in what kind of program would you use default values? Do you have any knowledge of this?

[BrendanC23]

I always provide the default values when calling useForm() for any form I am creating. This is the simplest method, and I recommend you try it. By doing this, I've never needed to provide a default value when using watch. I think that's only useful if you're code can't handle having a value of undefined.