useState ให้ function component มี local, reactive state ส่วนหนึ่ง มันคืนค่าเป็นคู่: current value และฟังก์ชัน setter การเรียก setter จะกำหนดการ re-render ด้วยค่าใหม่
const [count, setCount] = ();
(count + );
( c + );
useState ให้ function component มี local, reactive state ส่วนหนึ่ง มันคืนค่าเป็นคู่: current value และฟังก์ชัน setter การเรียก setter จะกำหนดการ re-render ด้วยค่าใหม่
const [count, setCount] = ();
(count + );
( c + );
1. การอัปเดตเป็นแบบ asynchronous / batched count จะไม่เปลี่ยนในบรรทัดหลังจาก setCount; มันจะมีค่าใหม่ในการ render ครั้งถัดไป ดังนั้นสิ่งนี้จึงเพิ่มขึ้นเพียงครั้งเดียว:
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
ใช้ functional updater เมื่อค่าถัดไปขึ้นอยู่กับค่าก่อนหน้า เพราะ React จะส่งค่าล่าสุดไป:
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
2. ค่าเริ่มต้นใช้เฉพาะในการ render ครั้งแรก สำหรับค่าเริ่มต้นที่ใช้ทรัพยากรมาก ให้ส่งฟังก์ชันเพื่อให้ทำงานครั้งเดียว (lazy init):
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 อาจไม่ตรวจพบการเปลี่ยนแปลง