Apa saé Peraturan Hooks? Napa durung iso nyebutake hook sacara kondisional?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, etc.) nduweni rong peraturan:

1. **Mung nyebutake hooks ing tingkat paling inggil** — aja ing dalam syarat, loop, utawa fungsi ingon-ingon.
2. **Mung nyebutake hooks saka fungsi React** — komponèn utawa custom hook liyane.

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

## Napa urutan kudu tetap stabil

React **ora** ngenali hooks miturut jeneng — iku ngandel ing **urutan panggilan**. Ing saben render iku mlaku hooks ing urutan sing padha persis lan cocok saben panggilan menyang slot ing dhaftar 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
```

Yèn kowe nyebutake hook sacara kondisional, urutan bisa owah antarane render. Banjur slot 1 bisa dadi `useState(B)` ing siji render lan `useEffect` ing sigurupane — React bakal maringi kondisi sing salah menyang hook sing salah, ngruksak kabèh.

## Carane nulis logika kondisional kanthi bener

Tetepi hook tanpa syarat lan jubone syarate **ing ajero** iku, utawa cabang ing nilai sing mulih:

```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` ngleksanakake peraturan iki kanthi otomatis.