Hooks کے قوانین کیا ہیں؟ آپ ایک hook کو مشروط طریقے سے کیوں نہیں بلا سکتے؟

Question

Accepted Answer

Hooks (`useState`, `useEffect`, وغیرہ) کے دو قوانین ہیں:

1. **Hooks کو صرف top level پر کال کریں** — کبھی شرائط، loops، یا nested functions کے اندر نہیں۔
2. **Hooks کو صرف React فنکشنز سے کال کریں** — components یا دوسرے custom hooks۔

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

## ترتیب مستحکم کیوں ہونی چاہیے

React نام کے لحاظ سے hooks کو **شناخت نہیں** دیتا — یہ **کال کی ترتیب** پر منحصر ہے۔ ہر render پر یہ hooks کو بالکل اسی ترتیب سے چلتا ہے اور ہر کال کو اندرونی فہرست میں ایک slot سے میل کھاتا ہے:

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

اگر آپ hook کو مشروط طریقے سے کال کریں، تو ترتیب renders کے درمیان بدل سکتی ہے۔ پھر slot 1 ایک render میں `useState(B)` اور اگلے میں `useEffect` ہو سکتا ہے — React غلط state کو غلط hook کو دے دے گا، سب کچھ خراب کر دے گا۔

## مشروط منطق کو صحیح طریقے سے کیسے لکھیں

Hook کو بغیر شرط کے رکھیں اور شرط کو **اندر** ڈالیں، یا اس کی واپسی کی قیمت کی بنیاد پر شاخیں کریں:

```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 rule یہ قوانین خودکار طور پر نافذ کرتا ہے۔