gruperly/.agents/skills/react-hook-form/references/sub-watch-specific-fields.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Watch Specific Fields Instead of Entire Form	CRITICAL	reduces re-renders from N fields to 1 field change	sub, watch, specific-fields, re-renders

Watch Specific Fields Instead of Entire Form

Calling watch() without arguments subscribes to ALL form fields, causing re-renders on any field change. Always specify the field names you need.

Incorrect (watches all fields, re-renders on any change):

function OrderForm() {
  const { register, watch, handleSubmit } = useForm()
  const formValues = watch()  // Re-renders when ANY field changes

  const total = calculateTotal(formValues.quantity, formValues.price)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('customerName')} />  {/* Changes here trigger total recalc */}
      <input {...register('email')} />  {/* Changes here trigger total recalc */}
      <input {...register('quantity', { valueAsNumber: true })} />
      <input {...register('price', { valueAsNumber: true })} />
      <div>Total: ${total}</div>
    </form>
  )
}

Correct (watches only needed fields):

function OrderForm() {
  const { register, watch, handleSubmit } = useForm()
  const [quantity, price] = watch(['quantity', 'price'])  // Only re-renders when these change

  const total = calculateTotal(quantity, price)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('customerName')} />  {/* No re-render on change */}
      <input {...register('email')} />  {/* No re-render on change */}
      <input {...register('quantity', { valueAsNumber: true })} />
      <input {...register('price', { valueAsNumber: true })} />
      <div>Total: ${total}</div>
    </form>
  )
}

Reference: useForm - watch