Wat zijn optimistische updates en hoe implementeer je ze veilig?

Question

Accepted Answer

Een **optimistische update** werkt de UI **onmiddellijk** bij, *aangenomen* dat een serververzoek slaagt, in plaats van op het antwoord te wachten. Dit maakt de app onmiddellijk voelen — maar je moet het geval afhandelen waarin het verzoek werkelijk mislukt door **terug te draaien**.

## Het contrast

```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)
```

## Waarom het belangrijk is

Voor acties met hoge zekerheid (een post liken, een taak omschakelen, een chatbericht verzenden) slaagt het verzoek bijna altijd, dus wachten op de roundtrip voegt alleen waargenomen vertraging toe. Optimistische updates maken deze acties onmiddellijk voelen.

## Veilig implementeren (terugdraaien is kritiek)

```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
  }
}
```

De sleutel tot veiligheid: **maak een snapshot van de vorige staat vóór de optimistische wijziging**, en herstel deze als het verzoek mislukt. Het overslaan van terugdraaien laat de UI liegen over de serverstatus — de gevaarlijke bug die optimistische updates kunnen introduceren.

## Met React Query (ingebouwde ondersteuning)

```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 formaliseert het patroon: `onMutate` (snapshot + optimistische update), `onError` (terugdraaien), `onSettled` (opnieuw ophalen om de waarheid te bevestigen).

## Wanneer gebruiken / vermijden

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

## Waarom het belangrijk is

Optimistische updates zijn een krachtige UX-techniek die apps onmiddellijk laten voelen door niet op het netwerk te wachten — maar ze zijn alleen *veilig* als je terugdraaien implementeert (snapshot-dan-herstellen) en fouten oppervlakkig maakt.

Het patroon (snapshot → update → bij mislukking terugdraaien → reconciliëren) is essentiële kennis, en begrijpen wanneer het geschikt is (waarschijnlijk succesvol, laag-risico acties) versus gevaarlijk (betalingen) is wat een glanzende, betrouwbare UI onderscheidt van één die serverstatus stilzwijgend misrepresenteert.