Si funksionon hook useState?

Question

Accepted Answer

`useState` i jep një komponente funksioni një copë **gjendje lokale, reaktive**. Kthen një çift: **vlera aktuale** dhe një funksion **setter**. Thirrja e setter-it planifikon një ri-renderim me vlerën e re.

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

## Dy gjëra që befasojnë fillestarët

**1. Përditësimet janë asinkrone / të grupuara.** `count` nuk ndryshon në rreshtin pas `setCount`; ka vlerën e re në *ri-renderimin* tjetër. Pra, kjo rritet vetëm një herë:

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

Përdorni **functional updater** kur vlera e ardhshme varet nga ajo e mëparshme, sepse React e kalon vlerën më të fundit:

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

**2. Vlera fillestare përdoret vetëm në ri-renderimin e parë.** Për një parazgjedhje të kushtueshme, kalojini një funksion në mënyrë që të ekzekutohet një herë (inicializim dembel):

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

## Pse është i rëndësishëm

Gjendje është ajo që e bën një komponent interaktiv — React e ekzekuton sërish funksionin dhe e ri-renderon ndërfaqen e përdoruesit sa herë që ndryshon gjendje.

Trajto gjendjen si **e pandryshëm**: krijo një array/objekt të ri në vend të mutimit, p.sh. `setItems([...items, x])`, përndryshe React mund të mos zbulojë ndryshimin.