Vorbește-mi despre React Hook Form: principalele caracteristici, cum se folosește, cum funcționează validarea?

React Hook Form este o bibliotecă pentru gestionarea formularelor în React, care utilizează hooks pentru control simplu și eficient al stării formularului.

Funcții principale:

• Gestionarea stării formularului fără a fi nevoie să creați componente controlate.
• Suport pentru validare bazată pe scheme (de exemplu, cu Yup) sau reguli încorporate.
• Număr minim de re-redări pentru a crește performanța.
• Integrare ușoară cu biblioteci UI.

Utilizare:

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: 'Numele este obligatoriu' })} />
      {errors.username && <p>{errors.username.message}</p>}

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

Validarea funcționează prin reguli transmise funcției register sau prin scheme externe. La trimitere, handleSubmit verifică datele, iar dacă există erori, acestea sunt disponibile în formState.errors. Acest lucru facilitează afișarea mesajelor de eroare și blocarea trimiterii formularului în cazul datelor incorecte.