Controlled form yönetimi ve form validasyonu nasıl yapılır?

Küçük formlarda her alan state'te tutulur ve gönderimde doğrulanır:

function KayitFormu() {
  const [form, setForm] = useState({ email: "", sifre: "" });
  const [hatalar, setHatalar] = useState({});

  const degis = e => setForm(f => ({ ...f, [e.target.name]: e.target.value }));

  const gonder = e => {
    e.preventDefault();
    const h = {};
    if (!/^\S+@\S+\.\S+$/.test(form.email)) h.email = "Geçerli bir e-posta girin";
    if (form.sifre.length < 8) h.sifre = "En az 8 karakter";
    setHatalar(h);
    if (Object.keys(h).length === 0) kaydet(form);
  };

  return (
    <form onSubmit={gonder} noValidate>
      <input name="email" value={form.email} onChange={degis} aria-invalid={!!hatalar.email} />
      {hatalar.email && <p role="alert">{hatalar.email}</p>}
      {/* ... */}
    </form>
  );
}

Büyük formlarda her tuş vuruşunda tüm formun yeniden render olmasını önlemek için React Hook Form (uncontrolled input + ref) ve şema doğrulama için Zod yaygın tercihlerdir.