რა არის optimistic updates და როგორ განახორციელებთ მათ უსაფრთხოდ?

Question

Accepted Answer

An **optimistic update** განაახლებს UI-ს **დაუყოვნებლივ**, *ვივარაუდებთ*, რომ სერვერის მოთხოვნა წარმატებული იქნება, იმის ნაცვლად, რომ პასუხს ველოდოთ. ეს აპლიკაციას მყისიერ გრძნობებს — მაგრამ უნდა გაუმკლავდეთ იმ შემთხვევას, როდესაც მოთხოვნა რეალურად ვერ შედეგდება **rollback**-ის საშუალებით.

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

## Why it matters for UX

დაკონფიდენცირებული ქმედებებისთვის (პოსტის შელაიქვა, todo-ს ჩართა-გამორთვა, чат-ის მესიჯის გაგზავნა), მოთხოვნა თითქმის ყოველთვის წარმატებული ხდება, ამიტომ ორმხრივი მოგზაურობისთვის ლოდინი მხოლოდ აღქმილ დაგვიანებას ზრდის. Optimistic updates ამ მოქმედებებს მყისიერს ხდის.

## Implementing it safely (the rollback is critical)

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

უსაფრთხოების გასაღები: **ფიქსირება უნდა გაკეთდეს optimistic ცვლილებამდე წინა მდგომარეობის**, და აღდეგეთ იგი, თუ მოთხოვნა ვერ შედეგდება. Rollback-ის გამოტოვება UI-ს სერვერის მდგომარეობის შესახებ მცდარი ინფორმაციას ტოვებს — ეს ის საშიში ხარვეზია, რომელსაც optimistic updates შეიძლება შემოიტანოს.

## With React Query (built-in 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 ოფიციალურად გასწორებს ამ პატერნს: `onMutate` (snapshot + optimistic update), `onError` (rollback), `onSettled` (refetch სიმართის დასადასტურებლად).

## When to use / avoid

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

## Why it matters

Optimistic updates მძლავრი UX ტექნიკაა, რომელიც აპლიკაციას მყისიერს გრძნობებინებს ქსელში ლოდინის გარეშე — მაგრამ ისინი უსაფრთხო მხოლოდ იმ შემთხვევაში, თუ განახორციელებთ rollback-ს (snapshot-then-restore) და გამოიჩენთ შეცდომებს.

ამ პატერნი (snapshot → update → on failure roll back → reconcile) აუცილებელი ცოდნაა, და იმის გაგება, როდის უნდა გამოიყენოთ ის (ალბათ-წარმატებული, დაბალი-ადგილობის ქმედებები) ვერსუს როდის იქნება ეს საშიში (გადახდა) არის ის, რაც უმჩნეველი, საიმედო UI-ს გამოყოფს ისეთი UI-დან, რომელიც ჩუმად აბინძურებს სერვერის მდგომარეობას.