React Hook Form

React 🟡 Mid

Définition

Librairie de formulaires performante basée sur les refs (uncontrolled). Minimise les re-rendus et offre une validation intégrée avec support de Zod, Yup, etc.

Analogie

Comme un formulaire papier : tu remplis tout d'un coup et la validation se fait a la soumission, pas a chaque lettre.

Exemple de code

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

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register('email', { required: true })} />
  {errors.email && <span>Email requis</span>}
  <button type="submit">Envoyer</button>
</form>

Cas d'usage

Formulaires complexes avec beaucoup de champs ou la performance est critique.

Anti-pattern

Re-implémenter la validation manuellement avec useState au lieu d'utiliser les resolvers integres.
#forms#interview#ecosystem

En entretien

  1. Explique-moi la différence entre React Hook Form et une validation avec useState.

    React Hook Form est basé sur les refs (uncontrolled), donc il minimise les re-rendus, contrairement à une validation manuelle avec useState qui re-rend à chaque frappe. C'est comme un formulaire papier : on remplit tout d'un coup et la validation se fait à la soumission, pas à chaque lettre.

  2. Quand est-ce que tu recommanderais React Hook Form ?

    Sur des formulaires complexes avec beaucoup de champs où la performance est critique. L'anti-pattern serait de réimplémenter la validation à la main avec useState au lieu d'utiliser les resolvers intégrés comme Zod ou Yup.

Fiche mise à jour le 2026-09-27

← → au clavier pour passer d'une fiche à l'autre