Skip to content

FormProvider

Share form context across deeply nested components.

</> 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")} />
}

Thank you for your support

If you find React Hook Form to be useful in your project, please consider starring and supporting it.

Edit