React Native میں React hooks کیسے کام کرتے ہیں؟

Question

Accepted Answer

**Hooks** (useState, useEffect, useContext، اور مزید) React کی خصوصیات ہیں جو functional components میں state اور side effects کو manage کرنے کے لیے ہیں — اور یہ 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 (ڈیٹا fetch کرنا، subscriptions، timers) کو ایک dependency array کے ساتھ handle کرتا ہے جو کنٹرول کرتا ہے کہ یہ کب چلے، اور ایک 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 hooks کو سمجھنا React Native کے لیے ضروری ہے کیونکہ **hooks functional components میں state اور side effects کو manage کرنے کا معیاری طریقہ ہیں**، جو اس طرح ہیں کہ جدید React Native apps بنائے جاتے ہیں، لہذا یہ لازمی علم ہے۔

Hooks React Native میں بالکل اسی طرح کام کرتے ہیں جیسے web کے React میں، اس علم کو براہ راست منتقل کیا جا سکتا ہے۔ **useState** (state کو manage کرنا، re-renders کو trigger کرنا) کسی بھی component کے لیے بنیادی ہے جس میں بدلتے ہوئے ڈیٹا ہوں۔ **useEffect** خاص طور پر اہم ہے: یہ **side effects** (ڈیٹا fetch کرنا، subscriptions، timers) کو ایک dependency array کے ساتھ handle کرتا ہے جو یہ کنٹرول کرتا ہے کہ یہ کب چلے اور ایک **optional cleanup function** (leaks سے بچانے کے لیے اہم unsubscribe/cleanup کے ذریعے) — useEffect کو، اس کے dependency array کو، اور cleanup کو سمجھنا ضروری ہے کیونکہ side effects (جیسے جب screen لوڈ ہو تو ڈیٹا fetch کرنا) عام ہیں اور useEffect کو غلط طریقے سے استعمال کرنے سے bugs آتے ہیں (غلط dependencies سے infinite loops، missing cleanup سے leaks)۔

**دیگر اہم hooks** کو سمجھنا — useContext (shared ڈیٹا کو بغیر prop drilling کے استعمال کرنا)، useRef (مستقل mutable references)، useMemo/useCallback (performance کے لیے memoization)، useReducer (پیچیدہ state)، اور **custom hooks** (reusable stateful logic کو نکالنا جیسے useFetch یا useAuth — code reuse کے لیے ایک طاقتور pattern) — real components بنانے کے لیے toolkit کو cover کرتا ہے۔

**Hooks کے قوانین** (ان کو صرف top level پر اور صرف components/custom hooks سے کال کرنا، کیونکہ React call order پر منحصر ہے) کو سمجھنا ضروری ہے تاکہ subtly bugs سے بچا جا سکے۔

چونکہ hooks جدید functional React Native components میں state اور side effects کے لیے معیاری طریقہ ہیں (اور علم براہ راست React سے منتقل ہوتا ہے)، اور چونکہ اہم hooks کو سمجھنا (خاص طور پر useState اور useEffect اپنے cleanup کے ساتھ) اور قوانین کو سمجھنا صحیح components بنانے کے لیے ضروری ہے، React hooks کو سمجھنا ضروری ہے، بار بار استعمال ہونے والا React Native علم — جدید React Native components بنانے کے لیے بنیادی، state اور side effects کو manage کرنے کے لیے مرکزی، اور سیدھے طور پر web React سے منتقل، React Native development کے لیے ایک بنیادی مہارت۔