Sobes.tech
Назад к вопросам
Middle+
10

Расскажи про React Hook Form: основные возможности, как используется, как работает валидация?

Компании, где спрашивали
IT OneIT One

Ответ от нейросети

sobes.tech AI

React Hook Form — это библиотека для управления формами в React, которая использует хуки для простого и эффективного контроля состояния формы.

Основные возможности:

  • Управление состоянием формы без необходимости создавать контролируемые компоненты.
  • Поддержка валидации на основе схем (например, с Yup) или встроенных правил.
  • Минимальное количество ререндеров для повышения производительности.
  • Простая интеграция с UI-библиотеками.

Использование:

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

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

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('username', { required: 'Имя обязательно' })} />
      {errors.username && <p>{errors.username.message}</p>}

      <input type="submit" />
    </form>
  );
}

Валидация работает через передачу правил в функцию register или через внешние схемы. При сабмите handleSubmit проверяет данные, и если есть ошибки, они доступны в formState.errors. Это позволяет легко показывать сообщения об ошибках и блокировать отправку формы при некорректных данных.