Hva er optimistiske oppdateringer og hvordan implementerer du dem sikkert?

Question

Accepted Answer

En **optimistisk oppdatering** oppdaterer brukergrensesnittet **umiddelbart**, *forutsatt at* en serverforespørsel vil lykkes, i stedet for å vente på svaret. Dette gjør appen føles øyeblikkelig — men du må håndtere tilfellet der forespørselen faktisk mislykkes ved å **rulle tilbake**.

## 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 betyr noe for brukeropplevelsen

For handlinger med høy suksessrate (liker et innlegg, slår av/på en oppgave, sender en chatmelding), lykkes forespørselen nesten alltid, så det å vente på rundturen legger bare til opplevd forsinkelse. Optimistiske oppdateringer gjør disse umiddelbare.

## Implementering av det trygt (tilbakeføringen 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økkelen til sikkerhet: **ta et øyeblikksbilde av forrige tilstand før den optimistiske endringen**, og gjenopprett det hvis forespørselen mislykkes. Å hoppe over tilbakeføring etterlater brukergrensesnittet med feil informasjon om serverens tilstand — den farlige feilen som optimistiske oppdateringer kan introdusere.

## Med React Query (innebygd støtte)

```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` (øyeblikksbilde + optimistisk oppdatering), `onError` (tilbakeføring), `onSettled` (ominnhent for å bekrefte sannheten).

## Når du skal bruke / unngå

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

## Hvorfor det betyr noe

Optimistiske oppdateringer er en kraftig brukeropplevelsesteknikk som gjør apper føles øyeblikkelige ved ikke å vente på nettverket — men de er bare *trygge* hvis du implementerer tilbakeføring (øyeblikksbilde-så-gjenopprett) og presenterer feil.

Mønsteret (øyeblikksbilde → oppdater → ved feil, rull tilbake → avstem) er essensiell kunnskap, og det å forstå når det er hensiktsmessig (handlinger som sannsynlig lykkes, lavrisiko) versus farlig (betalinger) er det som skiller en polert, pålitelig brukergrensesnitt fra en som stille representerer serverens tilstand feil.