Apakah Peraturan Hooks? Mengapa anda tidak boleh memanggil hook secara bersyarat?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, dan lain-lain) mempunyai dua peraturan:

1. **Panggil hooks hanya di peringkat teratas** — jangan pernah di dalam syarat, loop, atau fungsi bersarang.
2. **Panggil hooks hanya dari fungsi React** — komponen atau hooks kustom lainnya.

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

## Mengapa urutan mesti stabil

React **tidak** mengenali hooks mengikut nama — ia bergantung pada **urutan panggilan**. Pada setiap render ia melalui hooks dalam urutan yang sama dan memadankan setiap panggilan ke slot dalam senarai dalaman:

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

Jika anda memanggil hook secara bersyarat, urutannya boleh berubah antara render. Kemudian slot 1 mungkin `useState(B)` pada satu render dan `useEffect` pada yang lain — React akan memberikan keadaan yang salah kepada hook yang salah, memusnahkan semuanya.

## Cara menulis logik bersyarat dengan betul

Jaga hook tanpa syarat dan letakkan syarat **di dalam**, atau cawang pada nilai yang dikembalikannya:

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

Peraturan lint `eslint-plugin-react-hooks` menguatkuasakan peraturan ini secara automatik.