Skip to content

useFormContext

Access useForm methods anywhere in the component tree.

</> useFormContext: () => UseFormReturn

This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop.

Return

This hook returns all the useForm methods and props.

const methods = useForm()


<FormProvider {...methods} /> // all the useForm return props


const methods = useFormContext() // retrieve those props
RULES

You need to wrap your form with the FormProvider component for useFormContext to work properly.

Since v7.44.0 Supports a third generic, useFormContext<TFieldValues, TContext, TTransformedValues>(), to type the resolver's transformed output separately from the raw form values and context type.

If you need to subscribe to form state values like errors, isDirty, or dirtyFields inside a FormProvider tree, use useFormState instead of destructuring formState from useFormContext(). formState is wrapped in a Proxy that only tracks the fields you actually read during render — destructuring formState and reading a property later (e.g. in a callback), or reading it conditionally, won't register a subscription, so the component won't re-render when that value changes.

Example:
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