React Native में React hooks कैसे काम करते हैं?

Question

Accepted Answer

**Hooks** (useState, useEffect, useContext, और अधिक) functional components में state और side effects का प्रबंधन करने के लिए React सुविधाएँ हैं — और वे 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 नियंत्रित करता है कि यह कब चले, और एक वैकल्पिक 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 hooks समझना React Native के लिए आवश्यक है क्योंकि **hooks functional components में state और side effects का प्रबंधन करने का मानक तरीका हैं**, जो वह तरीका है जिससे आधुनिक React Native apps बनाए जाते हैं, इसलिए यह अवश्य-जानने योग्य ज्ञान है।

Hooks React Native में web के लिए React की तरह ही समान रूप से काम करते हैं, जिससे यह ज्ञान सीधे हस्तांतरणीय बनता है। **useState** (state का प्रबंधन, re-renders को trigger करना) बदलते हुए data वाले किसी भी component के लिए मूलभूत है। **useEffect** विशेष रूप से महत्वपूर्ण है: यह **side effects** (data fetching, subscriptions, timers) को संभालता है जिसमें एक dependency array नियंत्रित करता है कि यह कब चले और एक **वैकल्पिक cleanup function** (unsubscribing/cleaning up द्वारा leaks को रोकने के लिए महत्वपूर्ण) — useEffect, इसकी dependency array, और cleanup को समझना आवश्यक है क्योंकि side effects (जैसे किसी screen के load होने पर data fetch करना) आम हैं और useEffect को गलत करने से bugs होते हैं (गलत dependencies से infinite loops, गायब cleanup से leaks)।

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

**Hooks के नियम** समझना (उन्हें केवल top level पर और केवल components/custom hooks से call करना, क्योंकि React call order पर निर्भर करता है) सूक्ष्म bugs से बचने के लिए आवश्यक है।

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