useState hook inafanya vipi?

Question

Accepted Answer

`useState` inatoa sehemu ya **local, reactive state** kwa kijenzi cha function. Inarudisha jozi: **thamani ya sasa** na **setter** function. Kuita setter hukagua upya-render na thamani mpya.

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

## Mambo mawili yanayosurprise wanatoshindwa

**1. Updates ni asynchronous / batched.** `count` haibadiliki kwenye mstari baada ya `setCount`; ina thamani mpya kwenye *next* render. Kwa hivyo hii inakuza mara moja tu:

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

Tumia **functional updater** wakati thamani ijayo inategemea ile iliyopita, kwa sababu React inapitisha thamani ya hivi karibuni:

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

**2. Thamani ya awali inatumiwa tu kwenye render ya kwanza.** Kwa default ya ghali, pita function ili iendeshwe mara moja (lazy init):

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

## Kwa nini ni muhimu

State ndilo linalotengeneza kijenzi kuwa interactive — React inakimbia upya function na kutengeneza upya UI wakati state inabadilika.

Tikisha state kama **immutable**: tengeneza array/object mpya badala ya kumuta, k.m. `setItems([...items, x])`, vinginevyo React inaweza kutodetect mabadiliko.