React Native का architecture कैसे काम करता है (bridge बनाम new architecture)?

Question

Accepted Answer

React Native **JavaScript** और **native** code चलाता है जिन्हें communicate करना होता है। मूल architecture एक asynchronous **bridge** का उपयोग करता था; **new architecture** (JSI, TurboModules, Fabric) तेज़, synchronous communication को सक्षम करता है। इसे समझना React Native के behavior और performance को स्पष्ट करता है।

## मूल architecture: 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 के architecture को समझना मूल्यवान senior-level ज्ञान है क्योंकि यह **React Native के behavior और performance characteristics को समझाता है**, ऐप्स के बारे में reason करने और उन्हें optimize करने की क्षमता को गहरा करता है।

मूलभूत संरचना — React Native एक **JS thread** (आपका code) और **native side** (UI, native modules) चलाता है जिन्हें **communicate** करना होता है — React Native कैसे काम करता है यह समझने की कुंजी है।

**मूल bridge architecture** को समझना (जहां JS और native एक asynchronous bridge के माध्यम से communicate करते हैं जो messages को JSON में serialize करता है और उन्हें पार भेजता है) React Native के ऐतिहासिक performance characteristics और सीमाओं को समझाता है: communication केवल asynchronous था, serialization overhead था, और bridge **heavy traffic के साथ एक bottleneck** बन सकता था (fast scrolling या data पार भेजने वाली animations में jank का कारण) — यही **bridge crossings को कम करना और animations को native thread पर चलाना महत्वपूर्ण optimizations क्यों थे**, architecture को व्यावहारिक performance सलाह से जोड़ता है।

**New architecture** को समझना (**JSI** जो serialization bridge के बिना direct, synchronous JS↔native calls सक्षम करता है; lazy native module loading के लिए **TurboModules**; बेहतर rendering के लिए **Fabric**; type-safe interfaces के लिए Codegen) बढ़ती हुई महत्वपूर्ण है क्योंकि यह default बन रहा है — यह performance में सुधार करता है, overhead कम करता है, synchronous calls सक्षम करता है, और smoother UI उत्पन्न करता है, React Native के महत्वपूर्ण विकास को दर्शाता है।

इस architecture को समझना **React Native के performance को समझाता है** (bridge क्यों मायने रखता था), **optimization को सूचित करता है** (architecture से आने वाली प्रथाएं), और स्पष्ट करता है कि React Native कैसे execute करता है — React Native को एक black box से एक समझने योग्य system में बदल देता है।

चूंकि architecture को समझना (bridge और new JSI-based architecture) React Native के performance characteristics को समझाता है, optimization को सूचित करता है, और इसके महत्वपूर्ण विकास के बारे में awareness दर्शाता है, और चूंकि यह गहराई किसी को React Native का उपयोग करने से इसे समझने तक उन्नत करती है, React Native के architecture को समझना मूल्यवान senior-level ज्ञान है — इसके behavior और performance को समझाता है, optimization को सूचित करता है, और senior React Native भूमिकाओं के लिए अपेक्षित गहराई और platform विकास के बारे में awareness दर्शाता है।