# FormProvider

> Wrap your form tree with FormProvider to share useForm methods across deeply nested components without passing props manually.

Source: https://react-hook-form.com/docs/formprovider

## `FormProvider`: [FormProviderProps](https://react-hook-form.com/ts#FormProviderProps)

This component hosts the context object and allows consuming components to subscribe to context and use [useForm](https://react-hook-form.com/docs/useform) props and methods.

### Props

---

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

| Name       | Type                        | Description                                    |
| ---------- | --------------------------- | ---------------------------------------------- |
| `...props` | `Object` | `FormProvider` requires all `useForm` methods. |

> **Important: 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

---

[Open in CodeSandbox](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)

```javascript
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`](https://react-hook-form.com/docs/useformcontext) get an object with missing methods.
- Inside a `FormProvider`, hooks such as [`useController`](https://react-hook-form.com/docs/usecontroller), [`useWatch`](https://react-hook-form.com/docs/usewatch), [`useFormState`](https://react-hook-form.com/docs/useformstate), and [`useFieldArray`](https://react-hook-form.com/docs/usefieldarray) can leave out `control`. They read it from context.
- To have two forms on one page, render two `FormProvider`s next to each other, not one inside the other.
- To share a form without React context, see [`createFormControl`](https://react-hook-form.com/docs/createFormControl).