Construire des formulaires incassables avec React Hook Form et Zod

La gestion des formulaires est souvent l’un des endroits où une application React accumule rapidement du code répétitif. Entre les valeurs, les erreurs, les états de soumission et les validations, un formulaire simple peut devenir étonnamment complexe.

C’est précisément pourquoi j’utilise React Hook Form + Zod.

Le combo gagnant

React Hook Form prend en charge l’état du formulaire avec un minimum de re-renders. Zod décrit les règles de validation dans un schéma typé.

import { z } from "zod";

export const userSchema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
  age: z.coerce.number().int().min(18),
});

export type UserForm = z.infer<typeof userSchema>;

Le schéma devient alors une source de vérité pour les types et les règles.

Connecter Zod à React Hook Form

Avec le resolver Zod, le formulaire peut utiliser directement ce schéma :

const form = useForm<UserForm>({
  resolver: zodResolver(userSchema),
  defaultValues: {
    name: "",
    email: "",
    age: 18,
  },
});

Les erreurs deviennent accessibles directement dans l’interface.

Pourquoi cela améliore le code

Sans schéma partagé, on finit souvent avec :

UI validation
      +
API validation
      +
TypeScript interface

Et ces trois définitions finissent par diverger.

Avec Zod, le schéma peut au minimum servir de référence pour le typage et la validation côté application.

Mais le serveur doit toujours valider

C’est une règle importante.

La validation côté client est destinée à l’expérience utilisateur. Elle n’est pas une frontière de sécurité.

Le backend doit reprendre le payload et appliquer ses propres règles avant de modifier les données.

Utilisateur
    │
    ▼
React Hook Form
    │
    ▼
Zod → feedback immédiat
    │
    ▼
API
    │
    ▼
Validation serveur
    │
    ▼
PostgreSQL

Gestion des erreurs

Je préfère distinguer :

• erreurs de champ ;
• erreurs métier ;
• erreurs réseau ;
• erreurs inattendues.

Une erreur comme « email déjà utilisé » n’est pas la même chose qu’une erreur 500.

Le frontend doit pouvoir afficher un message utile sans exposer les détails internes du serveur.

Les formulaires complexes

La même approche fonctionne pour :

• formulaires multi-étapes ;
• tableaux dynamiques ;
• champs conditionnels ;
• upload de fichiers ;
• formulaires d’administration.

L’important est de conserver des schémas lisibles et de ne pas transformer Zod en une énorme définition impossible à maintenir.

Mon principe

Je veux que le formulaire soit :

typé → validé → prévisible → maintenable.

React Hook Form s’occupe du comportement du formulaire, Zod des règles et TypeScript du contrat de développement. Le backend reste la dernière autorité.