Hooks Kuralları nelerdir? Bir hook'u neden koşullu olarak çağıramazsınız?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, vb.) iki kurala sahiptir:

1. **Hooks'u yalnızca en üst seviyede çağırın** — koşullar, döngüler veya iç içe işlevlerin içinde asla çağırmayın.
2. **Hooks'u yalnızca React işlevlerinden çağırın** — bileşenler veya diğer custom hooks.

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

## Neden önemli

React, hooks'u ada göre **tanımlamaz** — **çağrı sırasına** bağlı kalır. Her render'da hooks'ları tam aynı sırayla dolaşır ve her çağrıyı iç listedeki bir slot'a eşleştirir:

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

Eğer bir hook'u koşullu olarak çağırırsanız, render'lar arasında sıra değişebilir. Sonra slot 1, bir render'da `useState(B)` ve sonraki render'da `useEffect` olabilir — React yanlış state'i yanlış hook'a verirdi ve her şeyi bozardı.

## Koşullu mantık nasıl doğru yazılır

Hook'u koşulsuz tutun ve koşulu **içine** koyun veya döndürdüğü değere göre dallanma yapın:

```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` lint kuralı bu kuralları otomatik olarak uygular.