Hooks को नियमहरू के हुन्? तपाईं हुकलाई सर्तमा कल किन गर्न सक्नुहुन्न?

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

यदि तपाईं हुकलाई सर्तमा कल गर्नुहुन्छ भने, क्रम renders बीचमा परिवर्तन हुन सक्छ। त्यसपछि स्लट १ एक render मा `useState(B)` हुन सक्छ र अर्कोमा `useEffect` — React गलत अवस्थालाई गलत 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 नियमले यी नियमहरुलाई स्वचालित रूपमा लागू गर्छ।