React Hook Form Documentation

When using the watch API, keep the following rules in mind to avoid common pitfalls:

• Default Values: If defaultValue is not provided as the second argument to watch, the first render will return undefined because the function is called before register. It is highly recommended to provide defaultValues to the useForm hook or pass an inline defaultValue to watch to ensure consistent behavior.
• Re-renders: watch triggers a re-render at the root of your application or form. For better performance in large forms, use useWatch.
• Dependency Tracking: The result of watch is optimized for the render phase. If you need to detect value updates inside a useEffect, you may need an external custom hook for value comparison.
• Precedence: If both a defaultValue (as the second argument to watch) and defaultValues (in useForm) are supplied, the defaultValue passed to watch takes precedence.

To make a component's value available for validation and submission, you must register it into the hook. Each registered field requires a unique name as a key. You can use the spread operator to apply the registration to standard HTML elements like <input> or <select>.

import { useForm, SubmitHandler } from "react-hook-form"

interface IFormInput {
  firstName: string
  gender: "female" | "male" | "other"
}

export default function App() {
  const { register, handleSubmit } = useForm<IFormInput>()
  const onSubmit: SubmitHandler<IFormInput> = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>
      <input {...register("firstName")} />
      
      <label>Gender Selection</label>
      <select {...register("gender")}>
        <option value="female">female</option>
        <option value="male">male</option>
        <option value="other">other</option>
      </select>
      
      <input type="submit" />
    </form>
  )
}

React Hook Form is optimized for uncontrolled components using {...register}, but it is fully compatible with controlled components.

• Uncontrolled Components: Use components that forward a ref (like a standard <input />) and register them directly with {...register('name')}.
• Controlled Components: For UI library components that do not expose a native input ref (e.g., MUI Select, Antd Checkbox), wrap them with the Controller component. The Controller manages the component's state and provides a field object containing onChange, onBlur, value, and ref to be spread onto the component.

You can mix both patterns within a single form.

import { Input, Select, MenuItem } from "@material-ui/core"
import { useForm, Controller } from "react-hook-form"

const defaultValues = {
  select: "",
  input: "",
}

function App() {
  const { handleSubmit, reset, control, register } = useForm({
    defaultValues,
  })
  const onSubmit = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        render={({ field }) => (
          <Select {...field}>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
          </Select>
        )}
        control={control}
        name="select"
        defaultValue={10}
      />

      <Input {...register("input")} />

      <button type="button" onClick={() => reset({ ...defaultValues })}>
        Reset
      </button>
      <input type="submit" />
    </form>
  )
}

You can compose complex forms by creating a wrapper Form component that injects react-hook-form methods into its children via Children.map and createElement. This allows child components (like Input or Select) to receive register as a prop automatically if they have a name prop.

Implementation Strategy:

• The Form component uses useForm and iterates over children, injecting register into any child that possesses a name prop.
• Custom input components receive register and spread it onto the native element.

import { Children, createElement } from "react"
import { useForm } from "react-hook-form"

export default function Form({ defaultValues, children, onSubmit }) {
  const methods = useForm({ defaultValues })
  const { handleSubmit } = methods

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {Children.map(children, (child) => {
        return child.props.name
          ? createElement(child.type, {
              ...{ 
                ...child.props, 
                register: methods.register, 
                key: child.props.name 
              },
            })
          : child
      })}
    </form>
  )
}

export function Input({ register, name, ...rest }) {
  return <input {...register(name)} {...rest} />
}