So, why isn't useWatch pulling control from the context?

[ahkhanjani]

I tried to find an issue that mentioned this but I couldn't find any. Which is confusing me even more.

Is there a particular reason why useWatch can't use the control available from the context provider? Currently it errors if we don't manually give it the control. Why can't it be like the other hooks that use the context instead?

[chrisjcthomas]

useWatch does read control from context — but only if that context exists.

From the docs: control is optional when you are using FormProvider. The hook itself does not invent a form; it either takes an explicit control or falls back to useFormContext().

What usually causes the error

1. No FormProvider above the component

// parent
const methods = useForm()

return (
  <FormProvider {...methods}>
    <Child />
  </FormProvider>
)

// child
function Child() {
  // control comes from context — no prop required
  const value = useWatch({ name: "email" })
  return <span>{value}</span>
}

If Child is rendered outside <FormProvider>, you get the missing-control error. Same for portals, dialogs, and storybook wrappers that remount outside the provider.

2. You only wrapped with a plain form, not the provider

// this does NOT create context
const { register, control } = useForm()
return (
  <form>
    <Child /> {/* useWatch() here fails */}
  </form>
)

Here you must pass control in (or switch to FormProvider).

3. Calling useWatch() with no args and no provider

Watching the whole form still needs a control source:

useWatch()                 // needs FormProvider
useWatch({ name: "x" })    // same
useWatch({ control, name: "x" }) // always fine

Why it feels different from other hooks

Hooks like useFormContext fail loudly when the provider is missing. useWatch needs control either as an argument or from that same context, so the failure mode looks like “I have to pass control everywhere” when the real issue is missing provider at that part of the tree.

Pattern that scales

• Root: const methods = useForm(…) + <FormProvider {...methods}>
• Deep leaves: useWatch({ name }) / useFormContext() with no props
• Reusable fields used with or without a provider: accept optional control and let the hook resolve it:

function PriceField({ control }: { control?: Control<FormValues> }) {
  const price = useWatch({ control, name: "price" })
  // …
}

If you still get the error with a provider in place, the next place to check is whether the watching component is under a second React tree (portal target, another root, test harness) that does not include the provider.