آپ React Native ایپ کی کارکردگی کو کیسے بہتر بناتے ہیں؟

Question

Accepted Answer

React Native کی کارکردگی کو بہتر بنانے میں غیر ضروری **دوبارہ رینڈرنگ** کو کم کرنا، موثر **فہرستیں**، **JS-thread کام** اور bridge ٹریفک کو کم کرنا، تصاویر کو بہتر بنانا، اور animations کے لیے native thread استعمال کرنا شامل ہے۔ کارکردگی ہموار، ردعمل والی ایپس کے لیے اہم ہے۔

## دوبارہ رینڈرنگ کو کم کریں (React کا ایک اہم مسئلہ)

```text
✓ Avoid unnecessary RE-RENDERS:
  → React.memo (memoize components), useMemo (values), useCallback (functions)
  → correct, stable KEYS in lists; avoid creating new objects/functions inline that
    cause children to re-render
  → proper state structure (don't put everything in one big state that re-renders all)
```

## موثر فہرستیں

```text
✓ Use FLATLIST (not ScrollView + map) for long lists — lazy rendering/virtualization
✓ Optimize FlatList: keyExtractor, getItemLayout, windowSize, removeClippedSubviews;
  keep item components light and memoized
✓ For very large/complex lists → FlashList (Shopify) — a faster drop-in alternative
```

## JS thread اور bridge

```text
✓ The JS thread runs your code — keep it free for responsiveness (avoid heavy synchronous
  work; it causes jank/dropped frames)
✓ Minimize BRIDGE traffic (old architecture) — frequent JS↔native passes are costly
  (the NEW ARCHITECTURE / JSI reduces this)
✓ Run ANIMATIONS on the native thread (useNativeDriver / Reanimated) — not the JS thread
✓ Offload heavy computation; debounce expensive operations
```

## دیگر بہتریاں

```text
✓ Optimize IMAGES (sizes, caching — e.g. FastImage); lazy-load
✓ Reduce app startup time and bundle size; use Hermes (optimized JS engine)
✓ PROFILE to find bottlenecks (Flipper, performance monitor, React DevTools profiler)
✓ Test on lower-end devices (not just high-end)
```

## یہ کیوں اہم ہے

React Native کی کارکردگی کو بہتر بنانے کی سمجھ قیمتی سینئر سطح کی معلومات ہے کیونکہ **ہموار کارکردگی اچھی صارف کے تجربے کے لیے ضروری ہے**، اور React Native کے خاص کارکردگی کے مسائل ہیں، اس لیے معیاری ایپس بنانے کے لیے یہ اہم ہے۔

ویب کے لیے React کی طرح، ایک اہم مسئلہ **غیر ضروری دوبارہ رینڈرنگ کو کم کرنا** ہے (React.memo، useMemo، useCallback، stable keys، اور مناسب state structure استعمال کرتے ہوئے اجزاء کو بلاوجہ دوبارہ رینڈر ہونے سے روکنے کے لیے) — React Native ایپس میں ایک عام کارکردگی کا مسئلہ۔ **موثر فہرستیں** اہم ہیں: لمبی فہرستوں کے لیے **FlatList** استعمال کریں (ScrollView + map نہیں) مناسب بہتری کے ساتھ (keyExtractor، getItemLayout، ہلکے memoized item اجزاء)، اور بہت بڑی فہرستوں کے لیے **FlashList** استعمال کریں — کیونکہ فہرستیں عام ہیں اور خراب طریقے سے رینڈر شدہ فہرستیں حقیقی کارکردگی کے مسائل کا سبب بنتی ہیں۔

**JS-thread اور bridge** کے مسائل کو سمجھنا خاص طور پر اہم اور React-Native-خاص ہے: **JS thread ردعمل کے لیے خالی رہنا چاہیے** (سنگین synchronous کام jank کا سبب بنتا ہے)، **bridge traffic** (پرانی architecture میں) مہنگا ہے اس لیے JS↔native communication کو کم سے کم کیا جانا چاہیے (نئی architecture/JSI اس کو کم کرتی ہے)، اور اہم طور پر **animations کو native thread پر چلایا جانا چاہیے** (useNativeDriver/Reanimated کے ذریعے، JS thread پر نہیں) ہموری کے لیے — یہ React Native کی منفرد JS/native threading architecture اور اس کے کارکردگی کے اثرات کو ظاہر کرتے ہیں۔

دیگر بہتریاں (تصویری بہتری caching کے ساتھ، startup/bundle size کو کم کرنا، Hermes استعمال کرنا، bottlenecks تلاش کرنے کے لیے profiling، اور کم سطح والے آلات پر testing) toolkit کو مکمل کرتی ہیں۔

ہموار کارکردگی براہ راست UX کو متاثر کرتی ہے، اور React Native کی architecture خاص مسائل متعارف کراتی ہے (JS thread، bridge، native-thread animations) عام React optimization سے ماوراء۔

چونکہ ہموار کارکردگی UX کے لیے ضروری ہے اور React Native کے خاص کارکردگی کے مسائل ہیں (دوبارہ رینڈرنگ، موثر فہرستیں، JS thread/bridge، native-thread animations)، اور چونکہ ان کو حل کرنے والی مناسب بہتری ایپس کو ہموار رکھتی ہے، React Native کی کارکردگی کو بہتر بنانے کی سمجھ قیمتی سینئر سطح کی معلومات ہے ردعمل والی، پالش شدہ ایپس بنانے کے لیے — ایک اہم مہارت جو React optimization (دوبارہ رینڈرنگ، فہرستیں) اور React-Native-خاص مسائل (JS thread، bridge، native animations) دونوں کو ظاہر کرتی ہے، سینئر React Native ڈویلپرز سے متوقع کارکردگی کے شعور کے لیے اہم۔