Cum funcționează hook-ul useState?

Question

Accepted Answer

`useState` oferă unui component funcție o bucată de **stare locală, reactivă**. Returnează o pereche: **valoarea curentă** și o funcție **setter**. Apelarea setter-ului programează o re-renderare cu noua valoare.

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

## Două lucruri care surprind începătorii

**1. Actualizările sunt asincrone / în lot.** `count` nu se schimbă pe linia după `setCount`; are noua valoare la *următoarea* re-renderare. Deci aceasta incrementează doar o dată:

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

Folosiți **functional updater** atunci când valoarea următoare depinde de cea anterioară, deoarece React transmite cea mai nouă valoare:

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

**2. Valoarea inițială este utilizată doar la prima re-renderare.** Pentru o valoare implicită costisitoare, transmiteți o funcție pentru a o executa o singură dată (inițializare leneșă):

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

## De ce e important

Starea este ceea ce face un component interactiv — React re-execută funcția și re-randează interfața utilizatorului ori de câte ori starea se schimbă.

Tratați starea ca **imuabilă**: creați un nou array/obiect în loc să mutați, de ex. `setItems([...items, x])`, altfel React poate să nu detecteze schimbarea.