Miten `useState`-hook toimii?

Question

Accepted Answer

`useState` antaa funktiokomponentille palan **paikallista, reaktiivista tilaa**. Se palauttaa parin: **nykyisen arvon** ja **setter**-funktion. Setterin kutsuminen ajastaa uudelleenrenderöinnin uudella arvolla.

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

## Kaksi asiaa, joka yllättää aloittelijat

**1. Päivitykset ovat asynkronisia / eritelty.** `count` ei muutu `setCount`:n jälkeisellä rivillä; sillä on uusi arvo *seuraavassa* renderöinnissä. Joten tämä lisää vain kerran:

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

Käytä **functional updater** -tapaa, kun seuraava arvo riippuu edellisestä, koska React välittää uusimman arvon:

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

**2. Alkuarvo käytetään vain ensimmäisessä renderöinnissä.** Kalliiksi oletukseksi välitä funktio niin, että se suoritetaan kerran (lazy init):

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

## Miksi tämä on tärkeää

Tila on se, mikä tekee komponentista interaktiivisen — React suorittaa funktion uudelleen ja renderöi UI:n uudelleen aina kun tila muuttuu.

Kohtelee tilaa **muuttumattomuutena**: luo uusi taulukko/objekti mutatoimisen sijaan, esim. `setItems([...items, x])`, muuten React ei välttämättä havaitse muutosta.