Qu'est-ce que les mises à jour optimistes et comment les implémenter en toute sécurité ?

Question

Accepted Answer

Une **mise à jour optimiste** met à jour l'interface utilisateur **immédiatement**, en *supposant* qu'une requête serveur réussira, au lieu d'attendre la réponse. Cela rend l'application instantanée — mais vous devez gérer le cas où la requête échoue réellement en **restaurant l'état précédent**.

## Le contraste

```text
Pessimistic (normal): click → show spinner → wait for server → THEN update UI (feels slow)
Optimistic:           click → update UI INSTANTLY → send request →
                      if it fails, ROLL BACK the change (feels instant)
```

## Pourquoi c'est important pour l'UX

Pour les actions à forte probabilité de succès (aimer une publication, basculer un todo, envoyer un message de chat), la requête réussit presque toujours, donc attendre l'aller-retour ajoute juste une latence perçue. Les mises à jour optimistes rendent ces actions instantanées.

## L'implémenter en toute sécurité (la restauration est critique)

```jsx
async function toggleLike(post) {
  const previous = post.liked;                 // 1. SNAPSHOT the old state for rollback
  setPost({ ...post, liked: !post.liked });    // 2. update UI optimistically

try {
    await api.toggleLike(post.id);             // 3. fire the request
  } catch (err) {
    setPost({ ...post, liked: previous });     // 4. ROLL BACK on failure
    showError("Couldn't update — please retry"); // 5. tell the user
  }
}
```

La clé de la sécurité : **sauvegarder l'état précédent avant la modification optimiste**, et le restaurer si la requête échoue. Omettre la restauration laisse l'interface utilisateur mentir sur l'état du serveur — c'est le bug dangereux que les mises à jour optimistes peuvent introduire.

## Avec React Query (support intégré)

```jsx
useMutation({
  mutationFn: toggleLike,
  onMutate: async (newData) => {
    await queryClient.cancelQueries({ queryKey: ["post"] });
    const previous = queryClient.getQueryData(["post"]); // snapshot
    queryClient.setQueryData(["post"], newData);          // optimistic update
    return { previous };                                   // pass snapshot to onError
  },
  onError: (err, vars, context) => {
    queryClient.setQueryData(["post"], context.previous);  // rollback
  },
  onSettled: () => queryClient.invalidateQueries({ queryKey: ["post"] }), // reconcile with server
});
```

React Query formalise le pattern : `onMutate` (snapshot + mise à jour optimiste), `onError` (restauration), `onSettled` (refetch pour confirmer la vérité).

## Quand les utiliser / les éviter

```text
✓ Use: high-success, low-stakes actions (likes, toggles, reorder, chat)
✗ Avoid: critical/uncertain operations (payments, irreversible actions) — wait for confirmation
```

## Pourquoi c'est important

Les mises à jour optimistes sont une technique UX puissante qui rend les applications instantanées en n'attendant pas le réseau — mais elles ne sont *sûres* que si vous implémentez la restauration (snapshot-puis-restaurer) et affichez les erreurs.

Le pattern (snapshot → mise à jour → en cas d'échec restaurer → réconcilier) est une connaissance essentielle, et comprendre quand c'est approprié (actions probables de réussir, faibles enjeux) par rapport aux cas dangereux (paiements) est ce qui sépare une interface utilisateur soignée et fiable d'une qui représente silencieusement mal l'état du serveur.