Come funziona l'hook useState?

Question

IT Interview Practice · Accepted Answer

`useState` dà a una componente di funzione un pezzo di **stato locale, reattivo**. Restituisce una coppia: il **valore attuale** e una funzione **setter**. La chiamata al setter pianifica un re-render con il nuovo valore.

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

## Due cose che sorprendono i principianti

**1. Gli aggiornamenti sono asincroni / raggruppati.** `count` non cambia sulla riga dopo `setCount`; ha il nuovo valore al *prossimo* render. Quindi questo incrementa solo una volta:

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

Usa l'**updater funzionale** quando il valore successivo dipende dal precedente, perché React passa il valore più recente:

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

**2. Il valore iniziale viene utilizzato solo al primo render.** Per un valore predefinito costoso, passa una funzione in modo che venga eseguita una sola volta (lazy init):

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

## Perché è importante

Lo stato è ciò che rende una componente interattiva — React esegue nuovamente la funzione e esegue il re-render dell'interfaccia utente ogni volta che lo stato cambia.

Tratta lo stato come **immutable**: crea un nuovo array/oggetto invece di mutare, ad es. `setItems([...items, x])`, altrimenti React potrebbe non rilevare il cambiamento.

Due cose che sorprendono i principianti

Perché è importante

Domande correlate