Hvad er optimistiske opdateringer, og hvordan implementerer du dem sikkert?

Question

Accepted Answer

En **optimistisk opdatering** opdaterer brugergrænsefladen **øjeblikkeligt**, *forudsat at* en serveranmodning vil lykkes, i stedet for at vente på svaret. Dette får appen til at føles øjeblikkelig — men du skal håndtere det tilfælde, hvor anmodningen faktisk mislykkes ved at **rulle tilbage**.

## Kontrasten

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

## Hvorfor det betyder noget for UX

For højtpålideligt handlinger (like på et opslag, skift en todo, send en chatbesked), lykkes anmodningen næsten altid, så at vente på round-trip tilføjer bare mærket latens. Optimistiske opdateringer får disse til at føles øjeblikkelige.

## Implementering af det sikkert (tilbagerulning er kritisk)

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

Nøglen til sikkerhed: **snapshot den tidligere tilstand før den optimistiske ændring**, og gendan den, hvis anmodningen mislykkes. Hvis du springer tilbagerulning over, lader du brugergrænsefladen lyve om servertilstand — den farlige bug, som optimistiske opdateringer kan introducere.

## Med React Query (indbygget support)

```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 formaliserer mønsteret: `onMutate` (snapshot + optimistisk opdatering), `onError` (tilbagerulning), `onSettled` (gentag for at bekræfte sandheden).

## Hvornår skal du bruge / undgå

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

## Hvorfor det betyder noget

Optimistiske opdateringer er en kraftfuld UX-teknik, som får apps til at føles øjeblikkelige ved ikke at vente på netværket — men de er kun *sikre*, hvis du implementerer tilbagerulning (snapshot-derefter-gendannelse) og viser fejl.

Mønsteret (snapshot → opdatering → ved fejl tilbagerul → afstem) er væsentlig viden, og at forstå hvornår det er passende (aktioner, der sandsynligvis vil lykkes, lavrisiko) versus farligt (betalinger) er det, der adskiller en poleret, pålidelig brugergrænseflader fra en, der stille giver serverstarkestate urigtig repræsentation.