Формы и валидация (React)

Формы с «ручным» контролем состояния перерисовывают всю форму на каждую букву. React Hook Form рендерит только изменённое поле, а zod даёт типизируемую валидацию на сервере и клиенте.

RHF + zod

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const schema = z.object({
  email: z.string().email("Некорректный email"),
  password: z.string().min(8, "Минимум 8 символов")
});

function Signup() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema)
  });
  return (
    <form onSubmit={handleSubmit(async (data) => await api.signup(data))}>
      <input {...register("email")} />
      {errors.email && <p>{errors.email.message}</p>}
      <button type="submit">Создать</button>
    </form>
  );
}

Почему это важно

• быстрый ввод: поле контролируется, но форма не перерисовывается целиком;
• ошибки показываются после blur or submit, без спама на каждую букву;
• z.infer автоматически выводит типы из схемы;
• всё это работает и с TS (урок 26), и с UI-китами.