Cad iad nuashonruithe barrúil agus conas iad a chur i bhfeidhm go sábháilte?

Question

Accepted Answer

Cuireann **nuashonrú barrúil** an UI **láithreach**, *ag glacadh leis* go n-éireoidh le iarratas freastalaí, in ionad fanacht ar an fhreagra. Déanann sé an aip a bheith iomlánach — ach caithfidh tú an cás a bhainistiú nuair a theipeann an iarratas go dáiríre trí **an staid roimhe sin a dhéanamh ar ais**.

## An contraste

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

## Cén fáth a bhíonn sé tábhachtach do UX

Do gníomhartha ar bhealach ard a réimsítear a bheidh rath orthu (gréisc a dhéanamh ar phostáil, toggle a dhéanamh ar thodo, teachtaireacht chat a sheoladh), bíonn an iarratas beagnach i gcónaí rathúil, agus mar sin ní dhéanann fanacht ar an timthriall ach moill a bhreathnú a chur ar fhail. Déanann nuashonruithe barrúil na rudaí seo a bheith láithreach.

## A chur i bhfeidhm go sábháilte (an dearúd ar ais is ríthábhachtach)

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

An eochair a shábháilteacht: **an staid roimhe sin a bhreacadh sula ndéantar an athrú barrúil**, agus a thabhairt ar ais má theipeann an iarratas. Gan an dearúd ar ais a ligean ar fhail fágann sé an UI ag insint bréige faoi staid an fhreastalaí — an bug contúirteach is féidir le nuashonruithe barrúil a thabhairt isteach.

## Le React Query (tacaíocht ionsuite)

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

Fhoirmíonn React Query an patrún: `onMutate` (snapshot + nuashonrú barrúil), `onError` (dearúd ar ais), `onSettled` (athfharchur chun an fhírinne a dhearbhú).

## Cathain a úsáid / a sheachaint

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

## Cén fáth a bhíonn sé tábhachtach

Is teicníc UX cumhachtach iad nuashonruithe barrúil a dhéanann aipeanna a bheith láithreach gan fanacht ar an líonra — ach ní bhíonn siad *sábháilte* ach amháin má chuireann tú dearúd ar ais i bhfeidhm (snapshot-ansin-dhéan ar ais) agus earráidí a léiriú.

Is eolas riachtanach an patrún (snapshot → nuashonrú → ar theip dearúd ar ais → réconciliation), agus is í an tuiscint ar cathain a bhíonn sé oiriúnach (gníomhartha is dóichí go réireoidh leo, gníomhartha íseal-ghéar) i gcoinne na gcásanna contúirteacha (íocaistí) an rud a scarann UI geal, iontaofa ó cheann a léiríonn staid an fhreastalaí go simplí go mícheart.