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 हाताळते (डेटा 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 कसे बनवले जातात, म्हणून हे must-know ज्ञान आहे.

Hooks React Native मध्ये web साठी React मध्ये अगदी सारखेच काम करतात, या ज्ञानास थेट हस्तांतरणीय बनवतात. **useState** (state व्यवस्थापित करणे, re-renders trigger करणे) बदलणाऱ्या डेटा असलेल्या कोणत्याही component साठी मूलभूत आहे. **useEffect** विशेषत: महत्वाचा आहे: हा **side effects** (डेटा fetching, subscriptions, timers) हाताळते dependency array सह जे नियंत्रित करते की ते केव्हा चालते आणि एक **वैकल्पिक cleanup function** (unsubscribe/cleanup करून leaks रोखण्यासाठी महत्वाचा) — useEffect, त्याचा dependency array, आणि cleanup समजणे आवश्यक आहे कारण side effects (जसे screen load होतेवेळी डेटा fetching) सामान्य आहे आणि useEffect चुकीचे केल्यास bugs होतात (wrong dependencies पासून infinite loops, missing cleanup पासून leaks).

इतर मुख्य hooks समजणे — useContext (prop drilling न करता shared data consume करणे), useRef (persistent mutable references), useMemo/useCallback (performance साठी memoization), useReducer (complex state), आणि **custom hooks** (reusable stateful logic extract करणे जसे useFetch किंवा useAuth — code reuse साठी शक्तिशाली pattern) — real components बांधण्यासाठी toolkit कव्हर करते.

**hooks चे नियम** समजणे (त्यांना फक्त top level वर आणि फक्त components/custom hooks पासून कॉल करणे, कारण React call order वर अवलंबून आहे) subtle bugs टाळण्यासाठी आवश्यक आहे.

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