gruperly/.agents/skills/react-hook-form/references/sub-useformcontext-sparingly.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Use useFormContext Sparingly for Deep Nesting	MEDIUM	reduces prop drilling but increases implicit dependencies	sub, useFormContext, FormProvider, prop-drilling

Use useFormContext Sparingly for Deep Nesting

useFormContext eliminates prop drilling by accessing form methods via context, but creates implicit dependencies that are harder to track. Use it for deeply nested components; prefer explicit props for shallow nesting.

Incorrect (useFormContext for shallow nesting):

function ContactForm() {
  const methods = useForm()

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NameInput />  {/* One level deep, context overhead not needed */}
        <EmailInput />
      </form>
    </FormProvider>
  )
}

function NameInput() {
  const { register } = useFormContext()  // Implicit dependency
  return <input {...register('name')} />
}

Correct (explicit props for shallow nesting):

function ContactForm() {
  const { register, handleSubmit } = useForm()

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <NameInput register={register} />  {/* Explicit dependency */}
      <EmailInput register={register} />
    </form>
  )
}

function NameInput({ register }: { register: UseFormRegister<ContactFormData> }) {
  return <input {...register('name')} />
}

When to use useFormContext:

• Components nested 3+ levels deep
• Shared components used across multiple forms
• Complex form sections with many fields

Reference: useFormContext