React Hook Form

Что такое React Hook Form

React Hook Form (RHF) — самая популярная библиотека форм для React. Один хук, useForm, даёт всё нужное: регистрацию полей, валидацию, ошибки, состояние отправки.

Секрет производительности: она построена на неконтролируемых полях. Значения живут в DOM, а не в состоянии React → ввод не перерисовывает всю форму. На 50 полях разница ощутима.

'use client'
import { useForm } from 'react-hook-form'

type Values = { email: string; password: string }

export function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<Values>({ defaultValues: { email: '', password: '' } })

  const onSubmit = async (values: Values) => {
    await login(values)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <input type="email" {...register('email', { required: 'Email обязателен' })} aria-invalid={!!errors.email} />
      {errors.email && <p role="alert">{errors.email.message}</p>}

      <input type="password" {...register('password', { minLength: { value: 8, message: 'Минимум 8 символов' } })} />
      {errors.password && <p role="alert">{errors.password.message}</p>}

      <button disabled={isSubmitting}>Войти</button>
    </form>
  )
}

Части useForm

Когда проверять — режим

useForm({ mode: 'onTouched' })

Компоненты, которые не являются нативными полями: Controller

register работает с <input>, <select>, <textarea>. Для своих компонентов (выбор даты, select из UI-библиотеки) используют Controller, который превращает их в контролируемые поля:

<Controller
  control={control}
  name="country"
  render={({ field, fieldState }) => <CountrySelect {...field} error={fieldState.error?.message} />}
/>

Динамические списки: useFieldArray

const { fields, append, remove } = useFieldArray({ control, name: 'phones' })

{fields.map((field, i) => (
  <div key={field.id}>                                   {/* field.id, а не индекс */}
    <input {...register(`phones.${i}.number`)} />
    <button type="button" onClick={() => remove(i)}>Удалить</button>
  </div>
))}
<button type="button" onClick={() => append({ number: '' })}>Добавить телефон</button>

Валидация через схему

Правила, написанные в register, разбросаны по JSX. Рекомендуемый вариант: схема Zod + zodResolver — типы выводятся из схемы, а та же схема валидирует и на сервере. Подробнее — в уроке про Zod.

const form = useForm({ resolver: zodResolver(loginSchema), mode: 'onTouched' })

Частые ошибки

• watch() без аргумента в главном компоненте → перерисовка всей формы при каждом нажатии. Используйте useWatch({ name }) в маленьком компоненте.
• key={index} в useFieldArray — используйте field.id.
• Валидация только в RHF, без проверки на сервере.

Коротко

• useForm → register на полях, handleSubmit(onSubmit), formState.errors.
• Внутри — неконтролируемые поля → быстро; Controller для своих компонентов, useFieldArray для списков.
• mode: 'onTouched' + схема Zod через zodResolver.

Официальные источники

• React Hook Form — Get Started
• React Hook Form — useForm
• React Hook Form — useFieldArray
• React Hook Form Resolvers