Apa saja Aturan Hooks? Mengapa Anda tidak dapat memanggil hook secara bersyarat?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, dll.) memiliki dua aturan:

1. **Hanya panggil hooks di tingkat atas** — jangan pernah di dalam kondisi, loop, atau fungsi bersarang.
2. **Hanya panggil hooks dari fungsi React** — komponen atau custom hooks lainnya.

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

## Mengapa urutan harus stabil

React **tidak** mengidentifikasi hooks berdasarkan nama — mengandalkan **urutan panggilan**. Pada setiap render, ia berjalan melalui hooks dalam urutan yang sama persis dan mencocokkan setiap panggilan ke slot dalam daftar internal:

```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 dapat berubah antar render. Kemudian slot 1 mungkin `useState(B)` pada satu render dan `useEffect` pada render berikutnya — React akan memberikan state yang salah kepada hook yang salah, merusak semuanya.

## Mengapa ini penting

Tetap gunakan hook tanpa syarat dan letakkan kondisi **di dalamnya**, atau cabang pada nilai yang dikembalikan:

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

Aturan `eslint-plugin-react-hooks` lint menegakkan aturan-aturan ini secara otomatis.