Hooks के नियम क्या हैं? आप एक hook को सशर्त रूप से कॉल क्यों नहीं कर सकते?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, आदि) के दो नियम हैं:

1. **केवल hooks को शीर्ष स्तर पर कॉल करें** — कभी भी शर्तों, loops, या नेस्टेड फंक्शन के अंदर नहीं।
2. **केवल React फंक्शन से hooks कॉल करें** — घटकों या अन्य कस्टम 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 को सशर्त रूप से कॉल करते हैं, तो क्रम render के बीच बदल सकता है। तब slot 1 एक render पर `useState(B)` हो सकता है और अगले पर `useEffect` — React गलत state को गलत hook को दे देगा, सब कुछ corrupt कर देगा।

## सशर्त तर्क को सही तरीके से कैसे लिखें

हook को बिना शर्त रखें और condition को **इसके अंदर** रखें, या जो मान यह वापस करता है उस पर branch करें:

```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 नियम इन नियमों को स्वचालित रूप से लागू करता है।