> Что такое React Hook Form и для чего он используется (React)

Короткий ответ

React Hook Form - это библиотека для управления формами в React, построенная на хуках. Она упрощает валидацию, отправку и отслеживание состояния полей без лишних ререндеров. Основная цель - уменьшить boilerplate-код и повысить производительность за счёт изоляции обновлений компонентов.

Подробное объяснение

React Hook Form использует uncontrolled компоненты, то есть хранит значения полей в ref, а не в state React. Это позволяет избежать ререндеров всего дерева при каждом нажатии клавиши. Библиотека предоставляет хук useForm, который возвращает методы для регистрации полей, обработки ошибок и отправки. Валидация может быть встроенной (через правила HTML5) или кастомной с помощью схем (например, Yup или Zod). React Hook Form также легко интегрируется с UI-библиотеками через компонент Controller.

На практике

На собеседовании ожидают, что кандидат понимает разницу между controlled и uncontrolled компонентами. React Hook Form выбирают, когда нужно:

• работать с большими формами (10+ полей) без потери производительности;
• минимизировать количество кода для валидации и обработки ошибок;
• интегрироваться с внешними валидаторами (Yup, Zod).

Библиотека не подходит, если форма состоит из одного-двух полей - здесь проще обойтись обычным state.

Пример кода

JSX
import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data); // { email: 'test@test.com', password: '123' }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('email', { required: 'Email обязателен' })}
        placeholder="Email"
      />
      {errors.email && <span>{errors.email.message}</span>}

      <input
        type="password"
        {...register('password', { required: 'Пароль обязателен', minLength: 6 })}
        placeholder="Пароль"
      />
      {errors.password && <span>{errors.password.message}</span>}

      <button type="submit">Войти</button>
    </form>
  );
}

Как отвечать на собеседовании

Начни с краткого определения, затем объясни ключевое преимущество - производительность за счёт uncontrolled подхода. Упомяни, что библиотека решает проблему лишних ререндеров. Приведи пример использования: регистрация полей через register, обработка ошибок через formState.errors. Если спросят про интеграцию с UI-компонентами, расскажи про Controller. Не углубляйся в детали реализации, если не просят.

Что проверяет интервьюер

• Понимание разницы между controlled и uncontrolled компонентами.
• Знание, зачем нужны библиотеки для форм, а не нативный React state.
• Умение объяснить, как React Hook Form повышает производительность.
• Базовое понимание валидации (required, pattern, minLength).

Типичные ошибки

• Путать React Hook Form с Formik или Redux Form - это разные подходы (uncontrolled vs controlled).
• Говорить, что библиотека использует controlled компоненты - это неверно.
• Забывать про handleSubmit и пытаться вызывать onSubmit напрямую на форме.
• Не упоминать, что register возвращает props (onChange, onBlur, ref), которые нужно разворачивать в инпуте.