Jak działa hook useState?

Question

Accepted Answer

`useState` daje komponentowi funkcyjnemu kawałek **lokalnego, reaktywnego stanu**. Zwraca parę: **bieżącą wartość** i funkcję **setter**. Wywołanie setter-a planuje ponowne renderowanie z nową wartością.

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

## Dwie rzeczy, które zaskakują początkujących

**1. Aktualizacje są asynchroniczne / grupowane.** `count` nie zmienia się w linii po `setCount`; ma nową wartość przy *następnym* renderowaniu. Dlatego ten kod inkrementuje tylko raz:

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

Użyj **functional updater**, gdy następna wartość zależy od poprzedniej, ponieważ React przesyła najnowszą wartość:

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

**2. Wartość początkowa jest używana tylko przy pierwszym renderowaniu.** W przypadku kosztownego domyślnie, przekaż funkcję, aby uruchomiła się raz (lazy init):

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

## Dlaczego to ważne

Stan to to, co czyni komponent interaktywnym — React ponownie uruchamia funkcję i ponownie renderuje interfejs użytkownika, gdy stan się zmienia.

Traktuj stan jako **niezmienny**: utwórz nową tablicę/obiekt zamiast mutować, np. `setItems([...items, x])`, w przeciwnym razie React może nie wykryć zmiany.