Hur fungerar useState-hooken?

Question

Accepted Answer

`useState` ger en funktionskomponent en del **lokal, reaktiv state**. Den returnerar ett par: det **aktuella värdet** och en **setter**-funktion. Att anropa setter-funktionen schemalägger en omrendering med det nya värdet.

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

## Två saker som överraskar nybörjare

**1. Uppdateringar är asynkrona / grupperade.** `count` ändras inte på raden efter `setCount`; den har det nya värdet vid nästa render. Så detta inkrementerar bara en gång:

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

Använd **funktionell uppdaterare** när nästa värde beror på det tidigare, eftersom React skickar det senaste värdet in:

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

**2. Det initiala värdet används endast vid första renderingen.** För ett dyrt standardvärde, skicka en funktion så att den körs en gång (lazy init):

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

## Varför det är viktigt

State är det som gör en komponent interaktiv — React kör funktionen på nytt och renderar om användar­gränssnittet när staten ändras.

Behåndla state som **oföränderlig**: skapa en ny array/objekt istället för att mutera, t.ex. `setItems([...items, x])`, annars kanske React inte detekterar ändringen.