When building large or complex forms in React, you often want to break your form into smaller, reusable components. This is where React Hook Form's FormProvider and useFormContext become especially useful. The FormProvider component allows you to share a single form state across deeply nested components, while useFormContext enables any child component to access and interact with that shared form state. This pattern eliminates the need to pass form methods down through props, making your code cleaner and your components more reusable.

To create a reusable input component that works seamlessly with React Hook Form, you can use useFormContext inside your custom input component. This hook gives you access to the form's context, including functions like register, errors, and other methods. By combining FormProvider at the top level and useFormContext in your inputs, you can build flexible components that can be used in any form without extra wiring.

Here is a simple example of how this pattern works:

// MyInput.js
import React from "react";
import { useFormContext } from "react-hook-form";

export function MyInput({ name, label }) {
  const { register, formState: { errors } } = useFormContext();
  return (
    <div>
      <label>{label}</label>
      <input {...register(name)} />
      {errors[name] && <span>{errors[name].message}</span>}
    </div>
  );
}

// MyForm.js
import React from "react";
import { useForm, FormProvider } from "react-hook-form";
import { MyInput } from "./MyInput";

export function MyForm() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <MyInput name="firstName" label="First Name" />
        <MyInput name="lastName" label="Last Name" />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
}

In this pattern, MyInput never needs to receive register or errors as props. Instead, it uses useFormContext to access everything it needs from the form context provided by FormProvider. This approach increases reusability and keeps your codebase organized as your forms grow.