ਤੁਸੀਂ React Native ਐਪ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਨੂੰ ਕਿਵੇਂ ਅਨੁਕੂਲ ਬਣਾਉਂਦੇ ਹੋ?

Question

Accepted Answer

React Native ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣਾ ਗੈਰ-ਜ਼ਰੂਰੀ **re-renders** ਨੂੰ ਘੱਟ ਕਰਨਾ, ਪ੍ਰਭਾਵੀ **ਸੂਚੀਆਂ**, **JS-thread ਕੰਮ** ਅਤੇ bridge ਟ੍ਰੈਫਿਕ ਨੂੰ ਘੱਟ ਕਰਨਾ, ਚਿੱਤਰਾਂ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣਾ, ਅਤੇ ਐਨੀਮੇਸ਼ਨਾਂ ਲਈ native thread ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ। ਕਾਰਗੁਜ਼ਾਰੀ ਨਿਰਵਿਘਨ, ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਐਪਸ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ।

## Re-renders ਨੂੰ ਘੱਟ ਕਰੋ (ਇੱਕ ਮੁੱਖ 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 ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਅਨੁਕੂਲਨ ਨੂੰ ਸਮਝਣਾ ਮੁੱਲਵਾਨ senior-level ਗਿਆਨ ਹੈ ਕਿਉਂਕਿ **ਨਿਰਵਿਘਨ ਕਾਰਗੁਜ਼ਾਰੀ ਚੰਗੇ ਉਪਭੋਗਤਾ ਤਜਰਬੇ ਲਈ ਜ਼ਰੂਰੀ ਹੈ**, ਅਤੇ React Native ਦੇ ਖਾਸ ਕਾਰਗੁਜ਼ਾਰੀ ਵਿਚਾਰ ਹਨ, ਇਸਲਈ ਸੰਦ ਐਪਸ ਬਣਾਉਣ ਲਈ ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੈ।

Web ਲਈ React ਵਾਂਗ, ਇੱਕ ਮੁੱਖ ਚਿੰਤਾ ਹੈ **ਗੈਰ-ਜ਼ਰੂਰੀ re-renders ਨੂੰ ਘੱਟ ਕਰਨਾ** (React.memo, useMemo, useCallback, stable keys, ਅਤੇ ਸਹੀ state structure ਦੀ ਵਰਤੋਂ ਕਰਕੇ components ਨੂੰ ਬੇਲੋੜੇ re-render ਕਰਨ ਤੋਂ ਬਚਾਉਣਾ) — React Native ਐਪਸ ਵਿੱਚ ਇੱਕ ਆਮ ਕਾਰਗੁਜ਼ਾਰੀ ਸਮੱਸਿਆ। **ਪ੍ਰਭਾਵੀ ਸੂਚੀਆਂ** ਮਹੱਤਵਪੂਰਨ ਹਨ: **FlatList** ਦੀ ਵਰਤੋਂ ਕਰੋ (ScrollView + map ਨਹੀਂ) ਲੰਬੀਆਂ ਸੂਚੀਆਂ ਲਈ ਸਹੀ ਅਨੁਕੂਲਨ ਦੇ ਨਾਲ (keyExtractor, getItemLayout, light memoized item components), ਅਤੇ ਬਹੁਤ ਵੱਡੀਆਂ ਸੂਚੀਆਂ ਲਈ **FlashList** ਦੀ ਵਰਤੋਂ ਕਰੋ — ਕਿਉਂਕਿ ਸੂਚੀਆਂ ਆਮ ਹਨ ਅਤੇ ਖਰਾਬ-render ਕੀਤੀਆਂ ਗਈਆਂ ਸੂਚੀਆਂ ਅਸਲ ਕਾਰਗੁਜ਼ਾਰੀ ਸਮੱਸਿਆਵਾਂ ਦਾ ਕਾਰਨ ਬਣਦੀਆਂ ਹਨ।

**JS-thread ਅਤੇ bridge** ਦੇ ਵਿਚਾਰਾਂ ਨੂੰ ਸਮਝਣਾ ਵਿਸ਼ੇਸ਼ ਮਹੱਤਵਪੂਰਨ ਅਤੇ React-Native-specific ਹੈ: **JS thread ਨੂੰ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲਤਾ ਲਈ ਖਾਲੀ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ** (ਭਾਰੀ synchronous ਕੰਮ jank ਦਾ ਕਾਰਨ ਬਣਦਾ ਹੈ), **bridge ਟ੍ਰੈਫਿਕ** (ਪੁਰਾਣੀ architecture ਵਿੱਚ) ਮਹਿੰਗਾ ਹੈ ਇਸਲਈ JS↔native ਸੰਚਾਰ ਨੂੰ ਘੱਟ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ (ਨਵੀਂ architecture/JSI ਇਹ ਘੱਟ ਕਰਦਾ ਹੈ), ਅਤੇ ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ **ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ native thread 'ਤੇ ਚਲਾਉਣਾ ਚਾਹੀਦਾ ਹੈ** (useNativeDriver/Reanimated ਦੁਆਰਾ, JS thread ਉੱਤੇ ਨਹੀਂ) ਨਿਰਵਿਘਨਤਾ ਲਈ — ਇਹ React Native ਦੀ ਵਿਲੱਖਣ JS/native threading architecture ਅਤੇ ਇਸ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਪ੍ਰਤੀਬਿੰਬਤ ਕਰਦੇ ਹਨ।

ਹੋਰ ਅਨੁਕੂਲਨ (ਚਿੱਤਰ ਅਨੁਕੂਲਨ caching ਦੇ ਨਾਲ, startup/bundle ਸਾਈਜ਼ ਨੂੰ ਘੱਟ ਕਰਨਾ, Hermes ਦੀ ਵਰਤੋਂ ਕਰਨਾ, ਬਾਧਾਵਾਂ ਲੱਭਣ ਲਈ profiling, ਅਤੇ ਘਟੀਆ ਯੰਤਰਾਂ 'ਤੇ ਟੈਸਟ ਕਰਨਾ) ਟੂਲਕਿਟ ਨੂੰ ਪੂਰਾ ਕਰਦੇ ਹਨ।

ਨਿਰਵਿਘਨ ਕਾਰਗੁਜ਼ਾਰੀ ਸਿੱਧੇ UX ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦੀ ਹੈ, ਅਤੇ React Native ਦੀ architecture ਵਿਸ਼ੇਸ਼ ਵਿਚਾਰ ਦਾ ਪਰਿਚਾਰ ਕਰਦੀ ਹੈ (JS thread, bridge, native-thread ਐਨੀਮੇਸ਼ਨਾਂ) ਆਮ React ਅਨੁਕੂਲਨ ਤੋਂ ਬਾਹਰ।

ਕਿਉਂਕਿ ਨਿਰਵਿਘਨ ਕਾਰਗੁਜ਼ਾਰੀ UX ਲਈ ਅਤਿਆਵਸ਼ਕ ਹੈ ਅਤੇ React Native ਦੇ ਖਾਸ ਕਾਰਗੁਜ਼ਾਰੀ ਵਿਚਾਰ ਹਨ (re-renders, ਪ੍ਰਭਾਵੀ ਸੂਚੀਆਂ, JS thread/bridge, native-thread ਐਨੀਮੇਸ਼ਨਾਂ), ਅਤੇ ਕਿਉਂਕਿ ਸਹੀ ਅਨੁਕੂਲਨ ਇਹਨਾਂ ਨੂੰ ਸੰਬੋਧਿਤ ਕਰਦੇ ਹੋਏ ਐਪਸ ਨੂੰ ਨਿਰਵਿਘਨ ਰੱਖਦਾ ਹੈ, React Native ਕਾਰਗੁਜ਼ਾਰੀ ਅਨੁਕੂਲਨ ਨੂੰ ਸਮਝਣਾ ਮੁੱਲਵਾਨ senior-level ਗਿਆਨ ਹੈ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ, ਪਾਲਿਸ਼ਡ ਐਪਸ ਬਣਾਉਣ ਲਈ — ਇੱਕ ਕੁੰਜੀ ਕੌਸ਼ਲ ਜੋ React ਅਨੁਕੂਲਨ (re-renders, ਸੂਚੀਆਂ) ਅਤੇ React-Native-specific ਚਿੰਤਾਵਾਂ (JS thread, bridge, native ਐਨੀਮੇਸ਼ਨਾਂ) ਦੋਵਾਂ ਨੂੰ ਪ੍ਰਤੀਬਿੰਬਤ ਕਰਦਾ ਹੈ, senior React Native ਡਿਵੈਲਪਰਾਂ ਤੋਂ ਸੰਬੰਧਿਤ ਕਾਰਗੁਜ਼ਾਰੀ ਸਚੇਤਨਤਾ ਲਈ ਮਹੱਤਵਪੂਰਨ।