Hogyan működik a useState hook?

Question

Accepted Answer

A `useState` egy **lokális, reaktív állapot** részletét adja a funkciókomponensnek. Egy párt ad vissza: az **aktuális értéket** és egy **setter** függvényt. A setter hívása az új értékkel való újrarenderelést ütemezi.

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

## Két dolog, amely meglepetést okoz a kezdőknek

**1. A frissítések aszinkron / csoportosítottak.** A `count` nem változik a `setCount` utáni sorban; az új értéke a *következő* rendereléskor van. Tehát ez csak egyszer növekszik:

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

Használd a **funkcionális frissítőt**, amikor a következő érték az előzőtől függ, mivel a React a legújabb értéket adja át:

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

**2. A kezdeti érték csak az első rendereléskor használatos.** Egy drága alapértékhez adj át egy függvényt, hogy csak egyszer fusson le (lazy init):

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

## Miért fontos ez

Az állapot az, amely interaktívvá teszi a komponenst — a React újrafuttatja a függvényt és újrarendereli az UI-t, valahányszor az állapot megváltozik.

Kezelje az állapotot **változatlannak**: hozzon létre egy új tömböt/objektumot mutáció helyett, például `setItems([...items, x])`, ellenkező esetben a React nem észlelheti a változást.