Vad är optimistiska uppdateringar och hur implementerar du dem säkert?

Question

Accepted Answer

An **optimistic update** updates the UI **immediately**, *assuming* a server request will succeed, instead of waiting for the response. This makes the app feel instant — but you must handle the case where the request actually fails by **rolling back**.

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

## Varför det spelar roll för UX

För högkonfidenta åtgärder (att gilla ett inlägg, växla en todo, skicka ett chattmeddelande) lyckas begäran nästan alltid, så att vänta på returen lägger bara till uppfattad fördröjning. Optimistiska uppdateringar gör dessa omedelbar.

## Implementering säkert (rollback är 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
  }
}
```

Nyckel till säkerhet: **ta en ögonblicksbild av tidigare tillstånd före den optimistiska ändringen** och återställ den om begäran misslyckas. Att hoppa över rollback lämnar UI:n ljuga om servertillståndet — den farliga buggen som optimistiska uppdateringar kan introducera.

## Med React Query (inbyggt stöd)

```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 formaliserar mönstret: `onMutate` (snapshot + optimistic update), `onError` (rollback), `onSettled` (refetch för att bekräfta sanningen).

## När man ska använda / undvika

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

## Varför det spelar roll

Optimistiska uppdateringar är en kraftfull UX-teknik som gör appar omedelbar genom att inte vänta på nätverket — men de är bara *säkra* om du implementerar rollback (snapshot-then-restore) och visar fel.

Mönstret (snapshot → update → on failure roll back → reconcile) är väsentlig kunskap, och att förstå när det är lämpligt (åtgärder som sannolikt lyckas, låg risk) kontra farligt (betalningar) är vad som separerar ett polerat, pålitligt gränssnitt från ett som tyst misrepresenterar servertillståndet.