Kas yra optimistiniai atnaujinimai ir kaip juos saugu įgyvendinti?

Question

Accepted Answer

**Optimistinis atnaujinimas** iš karto atnaujina UI, *darydamas prielaidą*, kad serverio užklausa bus sėkminga, vietoj to, kad lauktum atsakymo. Tai daro programą momentine — bet turite tvarkyti atvejį, kai užklausa iš tiesų nepavyksta, **grąžindami pradinę būseną**.

## Kontrastas

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

## Kodėl tai svarbu naudotojams

Dėl veiksmų, kuriais galiausiai pasitikima (pažymėti įrašą, keisti TODO būseną, siųsti pokalbio žinutę), užklausa beveik visada pavyksta, todėl laukimas apvalinimo tiesiog prideda suvokiamą vėlavimą. Optimistiniai atnaujinimai daro šiuos veiksmus momentiniais.

## Saugus įgyvendinimas (grąžinimas yra kritinis)

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

Saugumo raktas: **padaryti ankstesnės būsenos momentinę kopiją prieš optimistinį pakeitimą** ir ją atkurti, jei užklausa nepavyksta. Grąžinimo praleideimas leidžia UI meluoti apie serverio būseną — pavojingą klaidą, kurią gali sukėlti optimistiniai atnaujinimai.

## Su React Query (įtaisyta palaikyma)

```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 formalizuoja šabloną: `onMutate` (momentinė kopija + optimistinis atnaujinimas), `onError` (grąžinimas), `onSettled` (pakartotinis nuskaitymas, norint patikrinti tiesą).

## Kada naudoti / vengti

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

## Kodėl tai svarbu

Optimistiniai atnaujinimai yra galingas naudotojo patirties metodas, dėl kurio programos jaučiasi momentinės, nes nereikia laukti tinklo — bet jie yra *saugūs* tik jei įgyvendinate grąžinimą (momentinės kopijos-ir-atkūrimas) bei rodote klaidas.

Šablonas (momentinė kopija → atnaujinimas → nepavykus grąžinti → suderinti) yra būtina žinia, o supratimas, kada jis tinkamas (tikėtinai sėkmingi, mažos rizikos veiksmai) ir nesuderinamas (mokėjimai) yra tai, kas atskiria puikų, patikimą UI nuo to, kuris tyliai klaidingai atspindi serverio būseną.