Rules of Hooks là gì? Tại sao bạn không thể gọi một hook một cách có điều kiện?

Question

Accepted Answer

Hook (`useState`, `useEffect`, v.v.) có hai quy tắc:

1. **Chỉ gọi hook ở cấp cao nhất (top level)** — không bao giờ gọi bên trong điều kiện, vòng lặp, hay các hàm lồng nhau.
2. **Chỉ gọi hook từ các hàm React** — component hoặc custom hook khác.

```jsx
function Profile({ id }) {
  const [user, setUser] = useState(null); // ✅ top level
  if (id) {
    const [x] = useState(0);  // ❌ hook có điều kiện — phá vỡ React
  }
}
```

## Tại sao thứ tự phải ổn định

React **không** nhận diện hook theo tên — nó dựa vào **thứ tự gọi (call order)**. Ở mỗi lần render, React duyệt qua các hook theo đúng cùng một trình tự và khớp mỗi lời gọi với một slot trong danh sách nội bộ:

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

Nếu bạn gọi một hook có điều kiện, thứ tự có thể thay đổi giữa các lần render. Khi đó slot 1 có thể là `useState(B)` ở một lần render và `useEffect` ở lần kế tiếp — React sẽ trao nhầm state cho nhầm hook, làm hỏng mọi thứ.

## Cách viết logic có điều kiện cho đúng

Giữ cho hook không có điều kiện và đặt điều kiện **bên trong** nó, hoặc rẽ nhánh dựa trên giá trị mà nó trả về:

```jsx
const [user, setUser] = useState(null);
useEffect(() => {
  if (!id) return;       // điều kiện BÊN TRONG effect, không phải bao quanh nó
  fetchUser(id).then(setUser);
}, [id]);
```

Quy tắc lint `eslint-plugin-react-hooks` tự động thực thi các quy tắc này.