กฎของ Hooks คืออะไร? ทำไมคุณไม่สามารถเรียก hook ตามเงื่อนไขได้?

Question

Accepted Answer

Hooks (`useState`, `useEffect` เป็นต้น) มีสองกฎ:

1. **เรียก hooks เฉพาะที่ top level เท่านั้น** — ไม่เคยภายในเงื่อนไข loops หรือ nested functions
2. **เรียก hooks จากฟังก์ชัน React เท่านั้น** — components หรือ custom hooks อื่นๆ

```jsx
function Profile({ id }) {
  const [user, setUser] = useState(null); // ✅ top level
  if (id) {
    const [x] = useState(0);  // ❌ conditional hook — breaks React
  }
}
```

## ทำไมลำดับต้องมีเสถียรภาพ

React **ไม่ได้** ระบุ hooks ด้วยชื่อ — มันอาศัย **ลำดับการเรียก** ในแต่ละครั้งที่ render มันจะเดินผ่าน hooks ในลำดับเดียวกันและจับคู่แต่ละการเรียกกับ slot ในรายการภายใน:

```text
Render 1:  useState(A) → slot 0,  useState(B) → slot 1,  useEffect → slot 2
Render 2:  useState(A) → slot 0,  useState(B) → slot 1,  useEffect → slot 2
```

หากคุณเรียก hook ตามเงื่อนไข ลำดับสามารถเปลี่ยนแปลงระหว่าง renders จากนั้น slot 1 อาจเป็น `useState(B)` ในการ render หนึ่งและ `useEffect` ในการต่อไป — React จะมอบ state ที่ผิดให้กับ hook ที่ผิด ทำให้ทั้งหมดเสียหาย

## วิธีเขียนตรรมชาติตามเงื่อนไขอย่างถูกต้อง

เก็บ hook โดยไม่มีเงื่อนไขและวาง condition **ข้างใน** มันหรือแบ่งสาขาตามค่าที่ส่งกลับ:

```jsx
const [user, setUser] = useState(null);
useEffect(() => {
  if (!id) return;       // condition INSIDE the effect, not around it
  fetchUser(id).then(setUser);
}, [id]);
```

กฎ `eslint-plugin-react-hooks` ใช้กฎเหล่านี้โดยอัตโนมัติ