Hvordan virker `useState`-hook?

Question

Accepted Answer

`useState` giver en funktionskomponent et stykke **lokalt, reaktivt state**. Det returnerer et par: **den aktuelle værdi** og en **setter**-funktion. At kalde setter planlægger en gengivelse med den nye værdi.

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

## To ting der overrasker begyndere

**1. Opdateringer er asynkrone / batched.** `count` ændres ikke på linjen efter `setCount`; den har den nye værdi ved *næste* gengivelse. Så dette øger kun én gang:

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

Brug **functional updater**, når den næste værdi afhænger af den forrige, fordi React videregiver den seneste værdi:

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

**2. Den indledende værdi bruges kun ved første gengivelse.** For en kostbar standard, send en funktion, så den køres én gang (lazy init):

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

## Hvorfor det betyder noget

State er det der gør en komponent interaktiv — React generer funktionen og genviser UI'et når state ændres.

Behandle state som **immutable**: opret et nyt array/objekt i stedet for at mutere, f.eks. `setItems([...items, x])`, ellers kan React muligvis ikke registrere ændringen.