Depuis l’introduction des Actions dans React 19, la gestion des formulaires a été simplifiée. Cependant, certains développeurs constatent que leurs formulaires ne se réinitialisent pas automatiquement après la soumission, entraînant une mauvaise expérience utilisateur. Ce problème est généralement causé par une mauvaise configuration ou une compréhension incomplète des nouvelles fonctionnalités de React 19. Cet article explique pourquoi ce problème survient et propose des solutions pratiques pour y remédier.
Comment React 19 gère-t-il les formulaires avec Actions ?
React 19 introduit des améliorations dans la gestion des formulaires, notamment via les Actions. Ces dernières permettent de gérer directement les soumissions de formulaires côté serveur sans avoir besoin de gérer manuellement les requêtes ou l’état côté client.
Voici un exemple simple d’utilisation d’une Action avec un formulaire :
<form action={async (formData) => {
'use server';
// Logique de traitement des données
}}>
<input name="username" placeholder="Nom d'utilisateur" />
<button type="submit">Soumettre</button>
</form>
Dans cet exemple, le traitement des données est déporté côté serveur via la directive 'use server'. Cependant, le formulaire ne se réinitialise pas automatiquement après la soumission.
Pourquoi les formulaires ne se réinitialisent-ils pas ?
Plusieurs raisons peuvent expliquer ce problème :
- Absence de réinitialisation explicite : React ne réinitialise pas automatiquement les champs d’un formulaire. Cela doit être fait manuellement.
- État contrôlé mal configuré : Si les champs du formulaire sont contrôlés via
useState, ils doivent être réinitialisés explicitement après la soumission. - Action incomplète : L’Action ne renvoie pas de retour ou de signal indiquant la fin de la soumission.
Exemples de code générant le problème
1. Absence de gestion explicite de l’état
<form action={async (formData) => {
'use server';
console.log(formData.get('username'));
}}>
<input name="username" placeholder="Nom d'utilisateur" />
<button type="submit">Soumettre</button>
</form>
Dans cet exemple, le formulaire ne se réinitialise pas après la soumission car aucun mécanisme explicite n’a été mis en place.
2. Formulaire contrôlé sans réinitialisation de l’état
function Formulaire() {
const [username, setUsername] = useState('');
return (
<form action={async () => {
'use server';
console.log(username);
}}>
<input
name="username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<button type="submit">Soumettre</button>
</form>
);
}
Dans cet exemple, l’état username n’est pas réinitialisé après la soumission, ce qui empêche le formulaire de se réinitialiser.
Solutions pour corriger ce problème
Voici plusieurs méthodes pour résoudre ce problème en fonction du contexte :
1. Réinitialiser les champs avec un état contrôlé
Si les champs sont contrôlés via useState, réinitialisez-les manuellement après la soumission :
function Formulaire() {
const [username, setUsername] = useState('');
return (
<form
action={async () => {
'use server';
console.log(username);
setUsername(''); // Réinitialise l'état
}}
>
<input
name="username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<button type="submit">Soumettre</button>
</form>
);
}
2. Utiliser un formulaire non contrôlé
Pour éviter de gérer manuellement l’état, utilisez des champs non contrôlés et réinitialisez-les via une référence (ref) :
function Formulaire() {
const formRef = useRef();
return (
<form
ref={formRef}
action={async () => {
'use server';
console.log(new FormData(formRef.current).get('username'));
formRef.current.reset(); // Réinitialise le formulaire
}}
>
<input name="username" placeholder="Nom d'utilisateur" />
<button type="submit">Soumettre</button>
</form>
);
}
3. Fournir un retour explicite dans l’Action
Ajoutez un retour dans l’Action pour indiquer que la soumission est terminée et réinitialiser le formulaire :
<form action={async (formData) => {
'use server';
const username = formData.get('username');
console.log(username);
return 'reset'; // Signal pour réinitialiser
}}>
<input name="username" placeholder="Nom d'utilisateur" />
<button type="submit">Soumettre</button>
</form>
4. Utiliser une bibliothèque de gestion de formulaires
Des bibliothèques comme Formik ou React Hook Form offrent des solutions intégrées pour la gestion et la réinitialisation des formulaires :
import { useForm } from 'react-hook-form';
function Formulaire() {
const { register, handleSubmit, reset } = useForm();
const onSubmit = (data) => {
console.log(data);
reset(); // Réinitialise les champs
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('username')} placeholder="Nom d'utilisateur" />
<button type="submit">Soumettre</button>
</form>
);
}
FAQ : Questions fréquentes
1. Pourquoi React ne réinitialise-t-il pas automatiquement les formulaires après la soumission ?
React ne réinitialise pas automatiquement les formulaires pour laisser au développeur le contrôle total sur l’état des champs et la logique d’après-soumission. Cela permet de mieux gérer des cas complexes où des actions spécifiques sont nécessaires après l’envoi.
2. Dois-je toujours utiliser un formulaire contrôlé avec React ?
Non, cela dépend de vos besoins. Les formulaires contrôlés offrent un contrôle total sur les valeurs des champs, mais ils nécessitent plus de gestion. Les formulaires non contrôlés sont plus simples et peuvent être réinitialisés facilement avec des références.
3. Que fait la méthode reset() dans un formulaire HTML ?
La méthode reset() réinitialise tous les champs d’un formulaire à leurs valeurs par défaut. Elle est utile pour les formulaires non contrôlés ou pour réinitialiser rapidement un formulaire après soumission.
4. Puis-je réinitialiser un formulaire en rafraîchissant la page ?
Oui, le rafraîchissement de la page réinitialisera le formulaire, mais ce n’est pas une solution idéale car cela peut entraîner une mauvaise expérience utilisateur, surtout dans les applications modernes où les soumissions se font sans rechargement.
5. Les bibliothèques comme Formik sont-elles compatibles avec les Actions de React 19 ?
Oui, des bibliothèques comme Formik ou React Hook Form peuvent être utilisées avec les Actions de React 19, mais elles nécessitent une configuration adaptée pour tirer pleinement parti des nouvelles fonctionnalités.
Conclusion
Le problème des formulaires qui ne se réinitialisent pas après soumission dans React 19 peut être résolu en adoptant les bonnes pratiques. Que vous choisissiez de gérer l’état manuellement, d’utiliser des références ou de tirer parti des bibliothèques tierces, l’essentiel est de s’assurer que l’expérience utilisateur reste fluide et intuitive. Les Actions de React 19 offrent une flexibilité incroyable, et en suivant les solutions présentées ici, vous pouvez les utiliser efficacement pour vos projets.
