TanStack Form est une bibliothèque de gestion des formulaires performante et pensée TypeScript-first pour React (et plus encore). Contrairement à d'autres solutions, TanStack Form privilégie une approche headless qui donne un contrôle total sur le rendu des formulaires.

La force de TanStack Form réside dans sa capacité à gérer efficacement l'état des formulaires, la validation en temps réel, et les performances optimisées grâce à un système de re-renders ciblés.

Nous allons ici voir comment intégrer TanStack Form dans une application React moderne, avec des exemples concrets.

Installation de TanStack Form

Tout d'abord, installez TanStack Form :

Mettre en place des formulaires avancés avec Tanstack Form

Formulaire basique

Voici un premier exemple simple avec TanStack Form, un formulaire avec deux champs :

Mettre en place des formulaires avancés avec Tanstack Form

Cet exemple illustre les concepts fondamentaux de TanStack Form. Le hook "useForm" initialise le formulaire avec des valeurs par défaut et une fonction de soumission. Chaque champ utilise "form.Field" qui fournit un objet "field" contenant l'état du champ et les méthodes pour le gérer.

Les propriétés importantes sont :

  • "field.state.value" : la valeur actuelle du champ
  • "field.handleChange()" : met à jour la valeur
  • "field.handleBlur()" : déclenché quand l'utilisateur quitte le champ

Bouton “submit” avec états

Pour un bouton submit plus avancé qui gère les états de chargement et de validation :

Mettre en place des formulaires avancés avec Tanstack Form

Cet exemple utilise "form.Subscribe" pour optimiser les performances en s'abonnant uniquement aux changements d'état spécifiques. Le composant "form.Subscribe" permet de :

  • Contrôler précisément quels changements d'état déclenchent un re-render
  • Utiliser un "selector" pour extraire uniquement les données nécessaires
  • Éviter les re-renders inutiles du bouton quand d'autres parties du formulaire changent

Le selector "[state.canSubmit, state.isSubmitting]" ne met à jour le bouton que lorsque au moins une de ces deux propriétés ne change.

Synchronisation avec Tanstack Router

Synchronisation en temps réel entre le formulaire et les paramètres d'URL :

Mettre en place des formulaires avancés avec Tanstack Form

Cet exemple montre comment créer une synchronisation entre un formulaire et l'URL. Les "listeners" du formulaire permettent de réagir aux changements en temps réel et de mettre à jour l'URL automatiquement.

Intégration avec Tanstack Query

Exemple complet d'intégration avec TanStack Query pour créer/modifier des données :

Mettre en place des formulaires avancés avec Tanstack Form

Cet exemple illustre une intégration complète entre TanStack Form et TanStack Query :

  • La query charge automatiquement les données existantes si un "userId" est fourni
  • La mutation gère la création ou la mise à jour selon la présence d'un ID
  • Le cache est automatiquement invalidé après une sauvegarde réussie
  • Les erreurs sont capturées et affichées
  • Le formulaire s'initialise avec les données chargées grâce au système de "defaultValues"

Validation personnalisée

Validation avec messages d'erreur personnalisés :

Mettre en place des formulaires avancés avec Tanstack Form

Cet exemple montre comment implémenter une validation personnalisée côté client. Les validateurs s'exécutent lors de la soumission et peuvent retourner des erreurs spécifiques par champ. TanStack Form gère automatiquement l'affichage de ces erreurs via "field.state.meta.errors". La validation peut également être déclenchée en temps réel en utilisant les validateurs "onChange" ou "onBlur".

Détection des modifications non sauvegardées

Protection contre la perte de données avec détection des modifications :

Mettre en place des formulaires avancés avec Tanstack Form

Cet exemple implémente un système de protection contre la perte de données accidentelle (navigation vers une autre page par exemple). Le composant "FormBlocker" ajoute un gestionnaire d'événement qui avertit l'utilisateur s'il tente de quitter la page avec des modifications non sauvegardées. Cette approche améliore considérablement l'expérience utilisateur en évitant les pertes de données.

TanStack Form est une solution complète et performante qui s'intègre parfaitement dans un écosystème moderne incluant TanStack Query et TanStack Router. Sa philosophie headless et son système d'optimisation des performances en font un excellent choix pour des applications React professionnelles.

Vous recherchez des experts Business App ? Chez Next Decision, nos experts vous accompagnent de la définition des besoins jusqu'au déploiement. Rendez-vous sur la page Contact !