useState hook ทำงานอย่างไร

Question

Accepted Answer

`useState` ให้ function component มี **local, reactive state** ส่วนหนึ่ง มันคืนค่าเป็นคู่: **current value** และฟังก์ชัน **setter** การเรียก setter จะกำหนดการ re-render ด้วยค่าใหม่

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

## สองสิ่งที่ทำให้ผู้เริ่มต้นประหลาดใจ

**1. การอัปเดตเป็นแบบ asynchronous / batched** `count` จะไม่เปลี่ยนในบรรทัดหลังจาก `setCount`; มันจะมีค่าใหม่ในการ render ครั้ง*ถัดไป* ดังนั้นสิ่งนี้จึงเพิ่มขึ้นเพียงครั้งเดียว:

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

ใช้ **functional updater** เมื่อค่าถัดไปขึ้นอยู่กับค่าก่อนหน้า เพราะ React จะส่งค่าล่าสุดไป:

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

**2. ค่าเริ่มต้นใช้เฉพาะในการ render ครั้งแรก** สำหรับค่าเริ่มต้นที่ใช้ทรัพยากรมาก ให้ส่งฟังก์ชันเพื่อให้ทำงานครั้งเดียว (lazy init):

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

## ทำไมจึงสำคัญ

State คือสิ่งที่ทำให้ component เป็นแบบ interactive — React จะรันฟังก์ชันใหม่และ re-render UI ทุกครั้งที่ state เปลี่ยน

ถือว่า state เป็น **immutable**: สร้าง array/object ใหม่แทนการแก้ไข เช่น `setItems([...items, x])` มิฉะนั้น React อาจไม่ตรวจพบการเปลี่ยนแปลง