Skip to content
React Hook Form
Star

FormProvider

Share form context across deeply nested components.

View MarkdownOpen in ChatGPTOpen in Claude

</> FormProvider: FormProviderProps

This component hosts the context object and allows consuming components to subscribe to context and use useForm props and methods.

Props

The following table applies to FormProvider; useFormContext accepts no arguments.

NameTypeDescription
...propsObjectFormProvider requires all useForm methods.
RULES
  • Avoid nesting FormProvider components. Because React context does not merge, any useFormContext() call inside the inner FormProvider's subtree will only see the innermost form's methods and state — not the outer form — which can silently break field registration or validation for consumers that expect the outer form.
  • Since v7.44.0 FormProviderProps accepts a TTransformedValues generic (FormProviderProps<TFieldValues, TContext, TTransformedValues>) to type a resolver's transformed output.

Examples

CodeSandbox JS
import { useEffect } from "react"
import { useForm, FormProvider, useFormContext } from "react-hook-form"


export default function App() {
  const methods = useForm()


  const onSubmit = (data) => console.log(data)
  const { register, reset } = methods


  useEffect(() => {
    reset({
      name: "data",
    })
  }, [reset]) // ❌ never put `methods` as a dependency


  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input {...register("name")} />
        <input type="submit" />
      </form>
    </FormProvider>
  )
}


function NestedInput() {
  const { register } = useFormContext() // retrieve all hook methods


  return <input {...register("test")} />
}

Tips

  • Spread the whole useForm return value: <FormProvider {...methods}>. If you pass only some methods, child components that call useFormContext get an object with missing methods.
  • Inside a FormProvider, hooks such as useController, useWatch, useFormState, and useFieldArray can leave out control. They read it from context.
  • To have two forms on one page, render two FormProviders next to each other, not one inside the other.
  • To share a form without React context, see createFormControl.