Kif jaħdem il-useState hook?

Question

Accepted Answer

`useState` jagħti komponent tal-funzjoni saff ta' **state lokali, reattiv**. Jirritorna par: il-**valur kurrenti** u funzjoni **setter**. Meta ssejjaħ is-setter, jiprogramm mill-ġdid render bil-valur ġdid.

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

## Żewġ affarijiet li jistennew il-biddejja

**1. L-aġġornamenti huma asinkroni / batch.** `count` ma jinbidilx fuq il-linja wara `setCount`; għandu l-valur ġdid fuq ir-*render* li jmiss. Allura dan biss iżid darba:

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

Uża l-**functional updater** meta l-valur li jmiss jiddependi fuq dak li qabel, għaliex React jgħaddi l-aħħar valur:

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

**2. Il-valur inizjali jintuża biss fuq l-ewwel render.** Għal default għali, minn l-funzjoni hekk taħdem darba (lazy init):

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

## Għaliex dan importanti

L-state huwa li jagħmel komponenti interattiv — React jaħdem mill-ġdid il-funzjoni u jimmodella l-interface mil-ġdid kull darba li l-state jinbidel.

Ittratta state bħala **immutable**: oħloq array/object ġdid minflok mutazzjoni, eż. `setItems([...items, x])`, inkella React jista' ma jdetektax il-bidla.