Optimistic Update

Définition

Technique qui met a jour l'UI immédiatement avant la confirmation serveur, puis annule en cas d'échec. Amélioré la perception de vitesse.

Analogie

Comme célébrer un but avant la validation VAR : si le but est annule, on revient a l'état précédent.

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 fréquentes (like, toggle, reorder) ou la latence réseau dégrade l'UX.

Termes liés