Hoe werkt de useState hook?

Question

Accepted Answer

`useState` geeft een functiecomponent een stuk **lokale, reactieve state**. Het retourneert een paar: de **huidige waarde** en een **setter** functie. Het aanroepen van de setter plant opnieuw renderen in met de nieuwe waarde.

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

## Twee dingen die beginners verrassen

**1. Updates zijn asynchroon / gebatched.** `count` verandert niet op de regel na `setCount`; het krijgt de nieuwe waarde bij de *volgende* render. Dus dit verhoogt slechts eenmaal:

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

Gebruik de **functional updater** wanneer de volgende waarde afhangt van de vorige, omdat React de nieuwste waarde doorgeeft:

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

**2. De initiële waarde wordt alleen gebruikt bij de eerste render.** Voor een dure standaard waarde, geef een functie door zodat deze eenmaal wordt uitgevoerd (lazy init):

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

## Waarom het belangrijk is

State is wat een component interactief maakt — React voert de functie opnieuw uit en rendert de UI opnieuw wanneer de state verandert.

Behandel state als **onveranderlijk**: maak een nieuwe array/object in plaats van te muteren, bijv. `setItems([...items, x])`, anders kan React de verandering mogelijk niet detecteren.