Kaip veikia useState hook?

Question

Accepted Answer

`useState` suteikia funkcijos komponentui **lokalią, reaktyvią būseną**. Grąžina porą: **dabartinę vertę** ir **nustatymo** funkciją. Iškvietus nustatymo funkciją, numatytas pakartotinis atvaizduojimas su nauja verte.

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

## Du dalykai, kurie nustebina pradedančiuosius

**1. Atnaujinimai yra asinchroniniai / grupiuojami.** `count` nepasikeitė eilutėje po `setCount`; jis turi naują vertę *kitame* atvaizduojime. Taigi tai tik kartą padidinamas:

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

Naudokite **funkcinį atnaujintuvą**, kai kita vertė priklauso nuo ankstesnės, nes React praneša naujausią vertę:

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

**2. Pradinė vertė naudojama tik pirmame atvaizduojime.** Brangiam numatymaiam, perduokite funkciją, kad ji bėgtų kartą (lazy init):

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

## Kodėl tai svarbu

Būsena yra tai, kas daro komponentą interaktyvų — React iš naujo vykdo funkciją ir iš naujo atvaizduoja UI, kai tik keičiasi būsena.

Velkitės būseną kaip **nekeičiamą**: sukurkite naują masyvą/objektą vietoj mutavimo, pvz., `setItems([...items, x])`, kitaip React gali nepastebėti pokyčio.