Работа с формами: React Hook Form, валидация через Yup/Zod

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

Для валидации часто используют Yup или Zod — библиотеки для описания схем валидации и проверки данных.

Пример использования React Hook Form с Yup:

import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup.object().shape({
  email: yup.string().email('Неверный формат email').required('Обязательное поле'),
  password: yup.string().min(6, 'Минимум 6 символов').required('Обязательное поле'),
});

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} placeholder="Email" />
      {errors.email && <p>{errors.email.message}</p>}

      <input type="password" {...register('password')} placeholder="Пароль" />
      {errors.password && <p>{errors.password.message}</p>}

      <button type="submit">Отправить</button>
    </form>
  );
}

export default MyForm;

Такой подход позволяет централизованно описывать правила валидации и легко интегрировать их с формой, минимизируя код и повышая удобство поддержки.