Hvordan fungerer useState-hooken?

Question

Accepted Answer

`useState` gir en funksjonskomponent et stykke **lokalt, reaktivt tilstand**. Den returnerer et par: den **nåværende verdien** og en **setter**-funksjon. Å kalle setterfunksjonen planlegger en omrendering med den nye verdien.

```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 som overrasker nybegynnere

**1. Oppdateringer er asynkrone / batchet.** `count` endres ikke på linjen etter `setCount`; den har den nye verdien ved *neste* omrendering. Så dette øker bare én gang:

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

Bruk **functional updater** når neste verdi avhenger av forrige, fordi React sender den nyeste verdien inn:

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

**2. Den opprinnelige verdien brukes bare ved første omrendering.** For en dyrkostnadsfullt standard, send en funksjon slik at den kjøres én gang (lazy init):

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

## Hvorfor det er viktig

Tilstand er det som gjør en komponent interaktiv — React kjører funksjonen på nytt og rendrer grensesnittet på nytt når tilstanden endres.

Behandle tilstand som **uforanderlig**: lag en ny matrise/objekt i stedet for å mutere, f.eks. `setItems([...items, x])`, ellers kan React kanskje ikke oppdage endringen.