Conas a oibríonn an hook useState?

Question

Accepted Answer

`useState` tugann sé do chomhpháirt fheidhme píosa de **staid logánta, imoibritheach**. Filleann sé péire: an **luach reatha** agus feidhm **socraitheoir**. Agus glaoch ar an socraitheoir á dhéanamh, socraítear athrenderáil le an luach nua.

```jsx
const [count, setCount] = useState(0); // 0 is the initial value
setCount(count + 1);   // value form
setCount(c => c + 1);  // functional form (preferred when based on previous)
```

## Dhá rud a chuireann iontas ar thosaitheoirí

**1. Tá nuashonruithe neamhshioncronaithe / i ngrúpaí.** Ní athraíonn `count` ar an líne tar éis `setCount`; tá an luach nua aici ar an *chéad athrenderáil eile*. Mar sin ní dhéanann sé ach 1 huaire a mhéadú:

```jsx
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
```

Usáid an **functional updater** nuair a bhraithann an luach eile ar an ceann roimhe, toisc go bhfuil an luach is nuaí á thabhairt ag React isteach:

```jsx
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
```

**2. Ní úsáidtear an luach tosaigh ach ar an chéad athrenderáil.** Maidir le réamhshocrú costasach, seol feidhm ionas go rithfidh sé faoi dhó amháin (lazy init):

```jsx
const [data] = useState(() => expensiveInit()); // runs once, not every render
```

## An fáth go bhfuil tábhacht ann

Is staid a dhéanann comhpháirt idirghníomhach — athrithíonn React an fheidhm agus athronann sé an UI nuair a athraíonn staid.

Caithfidh tú staid a thairbhiú mar **immutable**: cruthaigh eagar/réad nua in ionad a bhogadh, m.sh. `setItems([...items, x])`, ar shlí eile b'fhéidir nach bhraithfidh React ar an athrú.