Jak funguje `useState` hook?

Question

Accepted Answer

`useState` poskytuje komponentě funkce kus **lokálního, reaktivního stavu**. Vrací dvojici: **aktuální hodnotu** a **funkci setter**. Volání setter naplánuje opětovné vykreslení s novou hodnotou.

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

## Dvě věci, které překvapí začátečníky

**1. Aktualizace jsou asynchronní / dávkované.** `count` se nezmění na řádku po `setCount`; má novou hodnotu při *dalším* vykreslení. Takže se toto zvýší pouze jednou:

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

Použivejte **funkční updater**, když příští hodnota závisí na předchozí, protože React předává nejnovější hodnotu:

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

**2. Počáteční hodnota se používá pouze při prvním vykreslení.** Pro nákladné výchozí nastavení, předejte funkci, aby se spustila jednou (lazy init):

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

## Proč je to důležité

Stav je to, co dělá komponentu interaktivní — React znovu spustí funkci a znovu vykreslí UI kdykoliv se stav změní.

Zachází se stavem jako s **neměnným**: vytvořte nové pole/objekt místo mutace, např. `setItems([...items, x])`, jinak React nemusí detekovat změnu.