Hooks चे नियम काय आहेत? तुम्ही hook ला सशर्तपणे का कॉल करू शकत नाही?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, इत्यादी) दोन नियम आहेत:

1. **Hooks केवळ सर्वोच्च स्तरावर कॉल करा** — कधीही अटींमध्ये, लूपमध्ये किंवा नेस्टेड फंक्शनमध्ये नाही.
2. **Hooks केवळ React फंक्शनमधून कॉल करा** — घटक किंवा इतर कस्टम 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 ला तंतोतंत समान क्रमानुसार चालवते आणि प्रत्येक कॉल ला अंतर्गत सूचीमधील स्लॉटशी जोडतो:

```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 मध्ये क्रम बदलू शकतो. नंतर स्लॉट 1 एका render वर `useState(B)` असू शकते आणि दुसऱ्या वर `useEffect` — React चुकीची स्थिती चुकीच्या 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 नियम हे नियम स्वयंचलितपणे लागू करते.