Des formulaires React à toute épreuve : Zod & React Hook Form
Les formulaires sont au cœur des produits SaaS B2B.
La plupart des développeurs construisent les formulaires de la mauvaise manière. Ils utilisent des composants contrôlés. Cela signifie qu'ils lient chaque champ à un hook useState.
Cela crée des problèmes de performance.
Si votre formulaire contient 20 champs, la saisie d'une seule lettre déclenche un re-render de l'ensemble du formulaire. Saisir un nom de 10 lettres impose 10 re-renders complets. Cela ralentit votre application sur les appareils d'entrée de gamme.
La validation manuelle est également un problème. Écrire des instructions "if" pour chaque champ est désordonné. Cela manque de sécurité TypeScript.
Vous avez besoin d'une meilleure approche.
Utilisez React Hook Form et Zod pour corriger cela.
React Hook Form utilise des entrées non contrôlées via des refs HTML. Les données restent dans le DOM. Le formulaire ne se re-render que lorsque c'est nécessaire, par exemple lorsqu'une erreur apparaît.
Zod gère votre validation. Il définit la structure exacte de vos données.
Voici le flux de travail :
Définissez un schéma Zod. Celui-ci sert de source unique de vérité. Il fournit à la fois la validation au runtime et les types TypeScript.
Utilisez le
zodResolver. Cela connecte React Hook Form à votre schéma Zod.Utilisez la fonction
register. Cela connecte vos entrées au formulaire sans déclencher de re-renders constants.
Les avantages :
- Aucun délai de saisie. Les formulaires volumineux restent fluides.
- Sécurité de typage. Vos données correspondent aux attentes de votre API.
- Moins de code. Vous arrêtez d'écrire de la logique de validation manuelle.
Arrêtez de lutter contre l'état de React. Utilisez des refs et des schémas pour construire des formulaires professionnels.
Source : https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j