Conas a dhéanann tú sonraí a fhéachaint i React agus conas a sheachainíonn tú coinníollacha rása?

Question

Accepted Answer

Úsáideann an cur chuige bunúsach `useEffect`, ach caithfidh tú **glanadh** agus **freagraí as ord** a láimhseáil, nó gheobhaidh tú sonraí stale agus rabhaidh.

```jsx
function User({ id }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

useEffect(() => {
    const ctrl = new AbortController();
    fetch(`/api/users/${id}`, { signal: ctrl.signal })
      .then(r => r.json())
      .then(setUser)
      .catch(e => { if (e.name !== "AbortError") setError(e); });

return () => ctrl.abort(); // cancel the in-flight request when id changes/unmounts
  }, [id]);
}
```

## An coinníoll rása a sheachainíonn sé seo

Abair go n-athraíonn `id` go tapa ó `1` go `2`. Gan chealú, tá an dá iarratas ar foluain. Má bhíonn iarratas `1` mall agus a réitíonn sé **tar éis** iarratas `2`, dhéanfá sonraí úsáideora `1` a thaispeáint do úsáideora `2`:

```text
fetch(1) ───────────(slow)──────▶ setUser(user1)  ❌ shown last, but wrong
fetch(2) ──(fast)──▶ setUser(user2)
```

Gnóthaíonn an iarratas roimhe sin a bhrath (an glanadh) an fhadhb seo. Baineann patrún sean-bhratán boolean (`let active = true; ... if (active) setUser(...)`) an rud céanna amach trí fhreagraí stale a leobhaint.

## I fíorfheidhmchláir, úsáid leabharlann

Téann an fhéachaint dhúsheasmhach in imeall agus fágann sé ar lár brú/atriail. Soláthraíonn **React Query (TanStack Query)** nó **SWR** stáit lódu/earráid, taisce, dìchealú, athnuachail chúlra, agus stale-while-revalidate ar do shon:

```jsx
const { data, isLoading, error } = useQuery({ queryKey: ["user", id], queryFn: () => getUser(id) });
```

Le creat-oibre ar nós Next.js, is fearr go minic loaders sonraí ar thaobh an fhreastalaí.