Menene hanyoyin asuncewa da kuma yadda za ka aiwatar da su cikin karewa?

Question

Accepted Answer

An **sake sabuntawa asuncewa** yana sabunta UI **nan take**, *zami da* wani sakamakon halin server zai nasara, maimakon jira ga karewa. Wannan yana sa app ta kasance kaɗan — amma dole ne ka kula da halin inda halin server ba ya nasara da gaske ta **ja da baya**.

## Bambance-bambance

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

## Me yasa ya mahimmanci wa UX

Wajen abubuwan da aka amince (ying jira ikon aiki, ɗumama abaɗun, aika saƙon chat), buɗe ake abubuwan da ba su kai gaba ba, don haka jira ga tattalin gida kawai yana ƙara illimin sanyen waje. Sabon sabuntawa asuncewa yana sa waɗannan su kasance kaɗan.

## Aiwatar da shi cikin karewa (ja da baya shine mahimmanci)

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

Maɓalli na karewa: **dauki snapshot na jihar da ta gabata kafin cabbin asuncewa**, kuma sake mai da shi idan halin server ya mutu. Rashin aiwatar da ja da baya yana bar UI inda ta ƙarya game da jihar server — cikin cutarwa wacce sabuntawa asuncewa zata kawo da ita.

## Tare da React Query (takunin da aka gina)

```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 yana sa alhed shafi: `onMutate` (snapshot + sabuntawa asuncewa), `onError` (ja da baya), `onSettled` (sake buɗo don tabbatarwa ni dole).

## Lokacin amfani da / kawar da

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

## Me yasa ya mahimmanci

Sabuntawa asuncewa wani dandali ne na UX a tsaye wacce ta sa apps su kasance kaɗan ta cewa ba za ta jira jamatowa - amma sai dai *karewa* ne idan ka aiwatar da ja da baya (snapshot-sannan-dawo) da kuma fitar jiya.

Shafin (snapshot → sabuntawa → kan kuɗi ja da baya → warware) ilmin da ya dace ne, kuma fahimtar lokacin da ya dace (zai iya samun iyakancewa, ƙarami-baba buguwar) a gida mai haushi (bayarwa) wacce ta rabuwa cuta, aminces UI daga gida wacce kawai ta wakilta jihar server.

## Me yasa ya mahimmanci

Sabuntawa asuncewa wani dandali ne na UX a tsaye wacce ta sa apps su kasance kaɗan ta cewa ba za ta jira jamatowa - amma sai dai *karewa* ne idan ka aiwatar da ja da baya (snapshot-sannan-dawo) da kuma fitar jiya.

Shafin (snapshot → sabuntawa → kan kuɗi ja da baya → warware) ilmin da ya dace ne, kuma fahimtar lokacin da ya dace (zai iya samun iyakancewa, ƙarami-baba buguwar) a gida mai haushi (bayarwa) wacce ta rabuwa cuta, aminces UI daga gida wacce kawai ta wakilta jihar server.