Optimistic Update

Definition

Technique qui met a jour l'UI immediatement avant la confirmation serveur, puis annule en cas d'echec. Ameliore la perception de vitesse.

Analogie

Comme celebrer un but avant la validation VAR : si le but est annule, on revient a l'etat precedent.

Exemple de code

useMutation({
  mutationFn: updateTodo,
  onMutate: async (newTodo) => {
    await queryClient.cancelQueries({ queryKey: ['todos'] });
    const prev = queryClient.getQueryData(['todos']);
    queryClient.setQueryData(['todos'], old => [...old, newTodo]);
    return { prev };
  },
  onError: (_, __, ctx) => queryClient.setQueryData(['todos'], ctx.prev),
});

Cas d'usage

Actions utilisateur frequentes (like, toggle, reorder) ou la latence reseau degrade l'UX.

Termes lies