React Native பயன்பாட்டின் செயல்திறனை எவ்வாறு மேம்படுத்துவது?

Question

Accepted Answer

React Native செயல்திறனை மேம்படுத்துவது தேவையற்ற **re-renders** குறைத்தல், திறமையான **lists**, **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)
```

## திறமையான lists

```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 போன்றே, ஒரு முக்கியமான கவலை **தேவையற்ற re-renders குறைத்தல்** (React.memo, useMemo, useCallback, நிலையான keys, மற்றும் சரியான state structure பயன்படுத்தி தேவையற்ற முறையில் components re-render ஆவதைத் தடுக்கக்) — React Native பயன்பாடுகளில் பொதுவான செயல்திறன் சிக்கல். **திறமையான lists** முக்கியமானது: **FlatList** பயன்படுத்துதல் (ScrollView + map அல்ல) நீண்ட lists க்கு சரியான மேம்படுத்தல் (keyExtractor, getItemLayout, light memoized item components), மற்றும் மிகவும் பெரிய lists க்கு **FlashList** பயன்படுத்துதல் — lists பொதுவானவை மற்றும் மோசமாக-rendered பயன்பாடுகள் உண்மையான செயல்திறன் சிக்கல்களை ஏற்படுத்துகின்றன.

**JS-thread மற்றும் bridge** கருத்தாய்வுகளைப் புரிந்துகொள்ளுதல் குறிப்பாக முக்கியமானது மற்றும் React-Native-குறிப்பிட்டது: **JS thread நাড்சாட்டாக இருக்க வேண்டும்** (பெரிய synchronous பணி jank ஏற்படுத்துகிறது), **bridge traffic** (பழைய architecture வில்) விலையுயர்ந்தது, எனவே JS↔native தொடர்பு குறைக்கப்பட வேண்டும் (புதிய architecture/JSI இதை குறைக்கிறது), மற்றும் முக்கியமாக **அனிமேশன்கள் native thread வில் இயங்க வேண்டும்** (useNativeDriver/Reanimated வாயிலாக, JS thread வல்ல) மென்மைக்கு — இவை React Native வின் தனிப்பட்ட JS/native threading architecture மற்றும் அதன் செயல்திறன் விளைவுகளை பிரதிபலிக்கின்றன.

மற்ற மேம்படுத்தல்கள் (படம் மேம்படுத்தல் caching உடன், startup/bundle நிறம் குறைத்தல், Hermes பயன்படுத்துதல், profiling bottlenecks கண்டுபிடிக்கக், மற்றும் குறைந்த-அளவு சாதനங்களில் testing) கருவிசெட்டை வட்டமிட்டு முடிக்கின்றன.

மென்மையான செயல்திறன் நேரடியாக UX ஐ பாதிக்கிறது, மற்றும் React Native வின் architecture குறிப்பிட்ட கருத்தாய்வுகளை அறிமுகப்படுத்துகிறது (JS thread, bridge, native-thread அனிமேশன்கள்) பொது React மேம்படுத்தல் அல்லாது.

மென்மையான செயல்திறன் UX க்கு அத்தியாவசியமானது மற்றும் React Native குறிப்பிட்ட செயல்திறன் கருத்தாய்வுகளைக் கொண்டுள்ளது (re-renders, திறமையான lists, JS thread/bridge, native-thread அனிமேশன்கள்), மற்றும் இந்த கருத்தாய்வுகளை சரியாக மேம்படுத்துவதால் apps மென்மையாக இருப்பதால், React Native செயல்திறன் மேம்படுத்தல் புரிந்துகொள்ளுதல் மூத்த-நிலை அறிவுக்கு மதிப்புக்குரியது responsive, polished apps உருவாக்குவதற்கு — React மேம்படுத்தல் (re-renders, lists) மற்றும் React-Native-குறிப்பிட்ட கவலைகள் (JS thread, bridge, native அனிமேशन்கள்) இரண்டையும் பிரதிபலிக்கும் ஒரு முக்கியமான திறன், மூத்த React Native உ‌ற்பத்தியாளர்களிடம் எதிர்பார்க்கக் கூடிய செயல்திறன் விழிப்புணர்வுக்கு முக்கியமானது.