Kako funkcionira useState hook?

Question

Accepted Answer

`useState` daje komponentni funkciji dio **lokalnog, reaktivnog stanja**. Vraća par: **trenutnu vrijednost** i funkciju **postavljanja**. Pozivanje postavljanja planira ponovno renderiranje s novom vrijednosti.

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

## Dvije stvari koje iznenade početnike

**1. Ažuriranja su asinkrona / grupirana.** `count` se ne mijenja u retku nakon `setCount`; ima novu vrijednost na *sljedećem* rendebiranju. Dakle, ovo se povećava samo jednom:

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

Koristite **funkcijski updater** kada sljedeća vrijednost ovisi o prethodnoj, jer React prosljeđuje najnoviju vrijednost:

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

**2. Početna vrijednost se koristi samo na prvom rendebiranju.** Za skupo zadano, proslijedi funkciju kako bi se izvršila samo jednom (lazy init):

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

## Zašto je to važno

Stanje je ono što komponentu čini interaktivnom — React ponovno pokreće funkciju i ponovno renderira sučelje kad god se stanje promijeni.

Smatraje stanje **nepromjenjivim**: kreiraj novi niz/objekt umjesto mutiranja, npr. `setItems([...items, x])`, inače React možda neće detektirati promjenu.