React Native యొక్క ఆర్కిటెక్చర్ ఎలా పనిచేస్తుంది (bridge vs new architecture)?

Question

Accepted Answer

React Native **JavaScript** మరియు **native** కోడ్‌ను నడుపుతుంది, అవి సంప్రదింపుకు ఉండాలి. అసలైన ఆర్కిటెక్చర్ అసమకాలిక **bridge**ను ఉపయోగించింది; **new architecture** (JSI, TurboModules, Fabric) వేగవంతమైన, సమకాలిక సంప్రదింపుకు అనుమతిస్తుంది. ఇది React Native యొక్క ప్రవర్తన మరియు పనితీరును స్పష్టం చేస్తుంది.

## అసలైన ఆర్కిటెక్చర్: bridge

```text
React Native runs:
  → a JS THREAD (your React/JS code) and the NATIVE side (UI, native modules)
  → they communicate over a BRIDGE: messages are SERIALIZED (to JSON), passed ASYNC,
    and deserialized on the other side
Limitations:
  ✗ ASYNCHRONOUS only (can't call native synchronously)
  ✗ SERIALIZATION overhead; the bridge can be a BOTTLENECK with heavy traffic
  ✗ e.g. fast scrolling/animations passing data over the bridge → jank
```

## New architecture (JSI, TurboModules, Fabric)

```text
The NEW ARCHITECTURE replaces the bridge:
  JSI (JavaScript Interface) → JS can call native code DIRECTLY and SYNCHRONOUSLY
    (no serialization bridge) → much faster JS↔native interop
  TURBOMODULES → native modules loaded lazily, via JSI (faster, on-demand)
  FABRIC → the new rendering system → better, more efficient UI rendering; sync layout
  CODEGEN → type-safe JS↔native interfaces
→ Result: better performance, less overhead, synchronous calls, smoother UI.
```

## ఇది ఎందుకు ముఖ్యమైనది (ఆచరణకు)

```text
→ Explains React Native's PERFORMANCE characteristics (why bridge traffic was costly)
→ The new architecture (default in recent RN) improves performance and interop
→ Informs optimization (minimize bridge crossings on the old architecture; native-thread
  animations) and understanding of how RN executes
```

## ఇది ఎందుకు ముఖ్యమైనది

React Native యొక్క ఆర్కిటెక్చర్‌ను అర్థం చేసుకోవడం ఉపయోగకరమైన సీనియర్-స్థరం జ్ఞానం ఎందుకంటే ఇది **React Native యొక్క ప్రవర్తన మరియు పనితీరు లక్షణాలను వివరిస్తుంది**, అప్లికేషన్‌ల గురించి తర్కించిన మరియు ఆప్టిమైజ్ చేసే సామర్థ్యాన్ని లోతుగా చేస్తుంది.

ప్రాథమిక నిర్మాణం — React Native **JS thread** (మీ కోడ్) మరియు **native side** (UI, native modules) ను నడుపుతుంది, అవి **సంప్రదింపుకు** ఉండాలి — React Native ఎలా పనిచేస్తుందో అర్థం చేసుకోవడానికి ఇది కీలకం.

**అసలైన bridge ఆర్కిటెక్చర్‌ను** అర్థం చేసుకోవడం (JS మరియు native సంప్రదింపుకు అసమకాలిక bridge ద్వారా జరుగుతుంది, ఇది సందేశాలను JSON కు సీరియలైజ్ చేస్తుంది మరియు దాటుతుంది) React Native యొక్క చారిత్రిక పనితీరు లక్షణాలు మరియు పరిమితులను వివరిస్తుంది: సంప్రదింపు అసమకాలిక-మాత్రమే, సీరియలైజేషన్ ఓవర్‌హెడ్‌ను కలిగి ఉంది, మరియు bridge భారీ ట్రాఫిక్‌కు **bottleneck** అవుతుంది (వేగవంతమైన స్క్రోలింగ్ లేదా డేటా దాటించే యానిమేషన్‌లలో jankను కారణం చేస్తుంది) — ఇది **ఎందుకు bridge క్రాసింగ్‌లను తగ్గించడం మరియు యానిమేషన్‌లను native thread లో నడపడం ముఖ్యమైన ఆప్టిమైజేషన్‌లు**, ఆర్కిటెక్చర్‌ను ఆచరణాత్మక పనితీరు సలహాకు అనుసంధానిస్తుంది.

**New architecture**ని అర్థం చేసుకోవడం (**JSI** సరళమైన, సమకాలిక JS↔native కాల్‌లను సీరియలైజేషన్ bridge లేకుండా ప్రారంభించడం; **TurboModules** lazy native module లోడింగ్ కోసం; **Fabric** మెరుగైన రెండరింగ్ కోసం; Codegen type-safe interfaces కోసం) ఇది డిఫాల్ట్ అవుతున్నందున క్రమంగా ముఖ్యమైనది — ఇది పనితీరు మెరుగుపరుస్తుంది, ఓవర్‌హెడ్‌ను తగ్గిస్తుంది, సమకాలిక కాల్‌లను ప్రారంభించడానికి, మరియు మృదువైన UI ను ఉత్పత్తి చేస్తుంది, React Native యొక్క ముఖ్యమైన పరిణామం సూచిస్తుంది.

ఈ ఆర్కిటెక్చర్‌ను అర్థం చేసుకోవడం **React Native యొక్క పనితీరు వివరిస్తుంది** (bridge ఎందుకు కీలకమైనది), **ఆప్టిమైజేషన్‌ను సూచిస్తుంది** (ఆర్కిటెక్చర్ నుండి అనుసరించే ఆచరణలు), మరియు React Native ఎలా నిర్వహిస్తుందో స్పష్టం చేస్తుంది — React Native ను నల్ల పెట్టె నుండి అర్థమయ్యే వ్యవస్థకు మార్పు చేస్తుంది.

ఆర్కిటెక్చర్ (bridge మరియు new JSI-ఆధారిత ఆర్కిటెక్చర్) అర్థం చేసుకోవడం React Native యొక్క పనితీరు లక్షణాలను వివరిస్తుంది, ఆప్టిమైజేషన్‌ను సూచిస్తుంది, మరియు దాని ముఖ్యమైన పరిణామ సందర్భం గురించి సందర్భం ప్రతిబింబిస్తుంది, మరియు ఇది ఒక సీనియర్ భూమిక నుండి అర్థం చేసుకోవడానికి React Native ను ఉపయోగించడం నుండి ఎలిവేట్ చేస్తుంది, React Native యొక్క ఆర్కిటెక్చర్‌ను అర్థం చేసుకోవడం ఉపయోగకరమైన సీనియర్-స్థరం జ్ఞానం — దాని ప్రవర్తన మరియు పనితీరును వివరిస్తుంది, ఆప్టిమైజేషన్‌ను సూచిస్తుంది, మరియు సీనియర్ React Native roles కోసం ఆశించిన లోతు మరియు ప్ల్యాట్‌ఫారమ్ పరిణామ సందర్భం ప్రతిబింబిస్తుంది.