Optimistic UI Forms

Definition

Pattern combinant useOptimistic et useFormStatus pour afficher immediatement le resultat d'une soumission de formulaire avant la confirmation serveur.

Analogie

Comme un tchat ou ton message s'affiche instantanement 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 percue nuit a l'UX : chat, commentaires, listes de taches.

Termes lies