Cad iad na lochtanna coitianta le hanailís an `useEffect` agus suas a ghlanadh?

Question

Accepted Answer

Athréitítear iarmhairt bunaithe ar a **spleáchais**, agus bheith an tsraith sin mícheart is é an foinse #1 de bhuganna React.

## Lochtanna 1: spleáchais ar iarraidh → luachanna stale

Dúnann iarmhairt os cionn na luachanna ó an fhíorú a cruthaíodh sí ann. Má fhágann tú spleáchais ar lár, leanann sí ag úsáid ceann sean:

```jsx
useEffect(() => {
  const id = setInterval(() => {
    console.log(count); // ❌ always logs the count from the FIRST render (0)
  }, 1000);
  return () => clearInterval(id);
}, []); // empty deps → effect never re-created → `count` frozen at 0
```

Foirceann: a bheith a spleáchais a chur leis `count`, nó a úsáid updater feidhmeannach nach bhfuil gá aici (`setCount(c => c + 1)`).

## Lochtanna 2: spleáchais neamhsheasmhach → iarmhairt rith gach fíorú

Athcruthaítear réada/eagair/feidhmeanna ar gach fíorú, agus mar sin tá siad "nua" gach uair agus ní éiríonn an iarmhairt socraithe:

```jsx
const options = { id }; // ❌ new object every render
useEffect(() => { load(options); }, [options]); // runs every render
```

Foirceann: a bheith ag brath ar an primitive (`[id]`), nó a mhéamhnú le `useMemo`/`useCallback`.

## Lochtanna 3: cleanup dearmadta → scaipeadh & rásaí

```jsx
useEffect(() => {
  const ctrl = new AbortController();
  fetch(url, { signal: ctrl.signal }).then(setData);
  return () => ctrl.abort(); // cancels the old request when `url` changes
}, [url]);
```

Gan an cleanup, d'fhéadfadh iarratas níos moille roimhe a réiteach *tar éis* ceann níos nua agus a bhreiseán sonraí nua (coinníoll race), agus bhogadh subscription/timers suas. Tugann an riail `react-hooks/exhaustive-deps` ESLint an chuid is mó de chásanna spleáchais ar iarraidh ar fholuain.