Optimistic UI Forms

Définition

Pattern combinant useOptimistic et useFormStatus pour afficher immédiatement le résultat d'une soumission de formulaire avant la confirmation serveur.

Analogie

Comme un tchat ou ton message s'affiche instantanément avec une horloge, puis la coche de confirmation arrive du serveur.

Exemple de code

function TodoForm({ addTodo }) {
  const [optimistic, setOptimistic] = useOptimistic(todos);
  async function action(formData) {
    setOptimistic(prev => [...prev, { text: formData.get('text'), pending: true }]);
    await addTodo(formData);
  }
  return <form action={action}><input name="text" /><SubmitBtn /></form>;
}

Cas d'usage

Formulaires ou la latence perçue nuit a l'UX : chat, commentaires, listes de taches.

Termes liés