Kako deluje useState hook?

Question

Accepted Answer

`useState` funkcijski komponenti daje kos **lokalnega, reaktivnega stanja**. Vrne par: **trenutno vrednost** in funkcijo **setter**. Klicanje setter-ja načrtuje ponovno upodobitev z novo vrednostjo.

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

## Dve stvari, ki presenetita začetnike

**1. Posodobitve so asinkrone / grupne.** `count` se ne spremeni v vrstici po `setCount`; ima novo vrednost pri *naslednji* upodobitvi. Torej se to poveča samo enkrat:

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

Uporabite **functional updater**, ko je naslednja vrednost odvisna od prejšnje, ker React posreduje najnovejšo vrednost:

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

**2. Začetna vrednost se uporablja samo pri prvi upodobitvi.** Za drago privzeto vrednost posredujte funkcijo, da se izvede enkrat (leno inicializacijo):

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

## Zakaj je to pomembno

Stanje je tisto, kar naredi komponento interaktivno — React ponovno zažene funkcijo in ponovno upodobiti uporabniški vmesnik vsakič, ko se stanje spremeni.

Obravnavajte stanje kot **nespremenljivo**: namesto mutiranja ustvarite novo matrico/objekt, npr. `setItems([...items, x])`, sicer React morda ne bo zaznal spremembe.