gruperly/.agents/skills/react-hook-form/references/sub-avoid-watch-in-render.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Avoid Calling watch() in Render for One-Time Reads	HIGH	prevents unnecessary subscriptions and re-renders	sub, watch, getValues, render, one-time-read

Avoid Calling watch() in Render for One-Time Reads

If you only need to read a value once (not subscribe to changes), use getValues() instead of watch(). Calling watch() creates a subscription that triggers re-renders on every change.

Incorrect (watch creates subscription for one-time read):

function SubmitButton() {
  const { watch, handleSubmit, formState: { isValid } } = useForm()

  const handleClick = () => {
    const email = watch('email')  // Creates subscription, but we only need current value
    analytics.track('form_submit_attempt', { email })
    handleSubmit(onSubmit)()
  }

  return <button onClick={handleClick} disabled={!isValid}>Submit</button>
}

Correct (getValues for one-time read):

function SubmitButton() {
  const { getValues, handleSubmit, formState: { isValid } } = useForm()

  const handleClick = () => {
    const email = getValues('email')  // No subscription, just current value
    analytics.track('form_submit_attempt', { email })
    handleSubmit(onSubmit)()
  }

  return <button onClick={handleClick} disabled={!isValid}>Submit</button>
}

When to use each:

• watch(): Need to react to value changes (display, conditional rendering)
• getValues(): Need current value at a point in time (event handlers, submit)

Reference: useForm - getValues