Hooks In Depth

hook คืออะไร

hook คือ function ที่ชื่อขึ้นต้นด้วย use ซึ่งให้ component “hook เข้าไป” ใช้ feature ของ React — state, lifecycle, context — ได้โดยที่ยังเป็น function ธรรมดา ก่อนมี hooks มีแต่ class component เท่านั้นที่ถือ state ได้ hooks นำพลังนั้นมาให้ function โดยไม่ต้องเขียน boilerplate ของ class และไม่ทำลาย model UI = f(state)

ทริกคือ React จับคู่ hook แต่ละตัวกับ slot ในหน่วยความจำส่วนตัวของ component โดยจับคู่ ตามลำดับการเรียก การตัดสินใจออกแบบข้อเดียวนี้อธิบาย Rules of Hooks ได้ทั้งหมด และเป็นเหตุผลที่ hooks ดูเหมือนเวทมนตร์จนกว่าคุณจะเห็นกลไกข้างใน

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่คุณจะได้เรียน
useState & updates	state, batching, updater function, lazy init, immutability
useEffect & effects	การ sync กับ external system — และเมื่อไรที่ไม่ต้องใช้
useRef & the DOM	mutable value, DOM ref และ ref-เป็น-prop ใน React 19
Memoization & the compiler	useMemo/useCallback/memo — และ React Compiler เปลี่ยนเกมอย่างไร
Rules & custom hooks	ทำไม rules ถึงมี และการแยก stateful logic มา reuse

สิ่งเดียวที่ต้องจำให้ขึ้นใจ

flowchart LR
  render["component renders"] --> h1["useState → slot 1"]
  render --> h2["useState → slot 2"]
  render --> h3["useEffect → slot 3"]
  h1 --> note["order must be identical
every render"]
  h2 --> note
  h3 --> note

hook ถูกจับคู่กับ memory slot ตามลำดับการเรียก

React ไม่รู้ ชื่อ hook ของคุณ — React รู้แค่ ลำดับ ที่คุณเรียก ในทุก render useState ตัวแรก map ไป slot 1, ตัวที่สองไป slot 2 ไปเรื่อย ๆ นี่คือเหตุผลที่คุณห้ามเรียก hook แบบมีเงื่อนไข ถ้าข้ามไปตัวหนึ่ง hook ที่เหลือทั้งหมดจะเลื่อนไปอยู่ slot ผิด จำภาพนี้ไว้แล้วทั้งโมดูลจะเข้าที่