React Native मा React hooks कसरी काम गर्छन्?

Question

Accepted Answer

**Hooks** (useState, useEffect, useContext, र अन्य) React features हुन् जो functional components मा state र side effects व्यवस्थापन गर्नका लागि — र तिनीहरू React Native मा पनि एउटै तरिकाले काम गर्छन्। मुख्य hooks बुझ्न React Native components निर्माणका लागि आवश्यक छ।

## useState — state

```jsx
const [count, setCount] = useState(0);     // state + setter; setting it re-renders
const [user, setUser] = useState(null);
```

## useEffect — side effects

```jsx
// useEffect runs side effects (data fetching, subscriptions) after render
useEffect(() => {
  fetchData();                  // runs after render
  // optional CLEANUP (returned function) — runs on unmount / before re-running
  const sub = subscribe();
  return () => sub.unsubscribe();   // CLEAN UP (prevent leaks)
}, [dependency]);                    // dependency array → when to re-run
// → [] = run once on mount; [dep] = run when dep changes; none = every render
```

`useEffect` ले side effects (data fetching, subscriptions, timers) लाई dependency array सँग सम्भालिन्छ जसले यो कहिले चल्ने भनेर नियन्त्रण गर्छ, र एक optional cleanup function (leaks रोक्नका लागि महत्त्वपूर्ण)।

## अन्य मुख्य hooks

```text
useContext → consume context (shared data without prop drilling)
useRef → a mutable reference that persists across renders (e.g. reference a component,
  store a value without re-rendering)
useMemo → memoize an expensive computed value (performance)
useCallback → memoize a function (avoid unnecessary re-creation/re-renders)
useReducer → manage complex state with a reducer
CUSTOM HOOKS → extract reusable stateful logic (e.g. useFetch, useAuth)
```

## Hooks को नियमहरू

```text
⚠️ Only call hooks at the TOP LEVEL of a component (not in conditions/loops/nested functions)
⚠️ Only call hooks from React components or custom hooks
→ These rules ensure hooks work correctly (React relies on call order).
```

## किन यो महत्त्वपूर्ण छ

React Native मा React hooks बुझ्न आवश्यक छ किनभने **hooks functional components मा state र side effects व्यवस्थापन गर्ने मानक तरिका हुन्**, जो कसरी आधुनिक React Native apps निर्माण गरिन्छन्, त्यसैले यो अवश्य-जान्न ज्ञान हो।

Hooks React Native मा web को React मा एकै तरिकाले काम गर्छन्, यो ज्ञान सीधै स्थानान्तरणीय बनाउँछ। **useState** (state व्यवस्थापन, re-renders ट्रिगर गर्न) परिवर्तनशील data भएको कुनै पनि component को लागि आधारभूत छ। **useEffect** विशेष गरी महत्त्वपूर्ण छ: यो **side effects** (data fetching, subscriptions, timers) लाई सम्भालिन्छ dependency array सँग जसले यो कहिले चल्ने भनेर नियन्त्रण गर्छ र एक **optional cleanup function** (unsubscribe/cleanup गरेर leaks रोक्नका लागि महत्त्वपूर्ण) — useEffect, यसको dependency array, र cleanup बुझ्न आवश्यक छ किनभने side effects (जस्तै screen लोड हुँदा data fetching) सामान्य छ र useEffect गलत बनाउँदा bugs हुन्छन् (गलत dependencies बाट infinite loops, मिसिङ cleanup बाट leaks)।

**अन्य मुख्य hooks** बुझ्न — useContext (shared data consume गर्न prop drilling बिना), useRef (persistent mutable references), useMemo/useCallback (performance को लागि memoization), useReducer (जटिल state), र **custom hooks** (reusable stateful logic जस्तै useFetch वा useAuth निकाल्न — code reuse को लागि एक शक्तिशाली pattern) — real components निर्माणका लागि toolkit कभर गर्छ।

**Hooks को नियमहरू** बुझ्न (तिनीहरूलाई केवल top level मा र केवल components/custom hooks बाट कल गर्न, किनभने React call order मा निर्भर गर्छ) सूक्ष्म bugs रोक्नका लागि आवश्यक छ।

आधुनिक functional React Native components मा hooks मानक mechanism भएको कारणले (र ज्ञान सीधै React बाट स्थानान्तरणीय छ), र मुख्य hooks (विशेष गरी useState र useEffect यसको cleanup सँग) र नियमहरू बुझ्न आवश्यक भएको कारणले सही components निर्माणका लागि, React hooks बुझ्न आवश्यक छ, बारम्बार-लागू गरिने React Native ज्ञान — आधुनिक React Native components निर्माणको लागि आधारभूत, state र side effects व्यवस्थापनका लागि केन्द्रीय, र web React बाट सीधै स्थानान्तरणीय, React Native development को लागि मूल कौशल।