By Prashan Jeyapragash
React Native has revolutionized mobile app development, enabling developers to build cross-platform apps with a native experience using JavaScript. However, like any technology, it had limitations, many of which arose from its architecture
With the introduction of the new architecture, React Native has evolved significantly, delivering improved performance, smoother interactions, and an enhanced developer experience. To fully appreciate these advancements, it’s important to understand the workings of the old architecture, its limitations, and how the new architecture overcomes these challenges.
This blog briefly summarizes React Native’s new architecture, highlighting the limitations of the old system and how the new improvements enhance performance and efficiency.
The Old Architecture: How It Worked?
React Native’s old architecture was built around the Bridge concept, facilating the communication between JavaScript and native modules (iOS/Android).
Key Components
- JavaScript Runtime: Executes the app’s logic written in JavaScript.
- Bridge: Acts as an asynchronous communication layer between JavaScript and native modules.
- Native Modules: Handle platform-specific functionalities (e.g., accessing the camera, sensors, etc.).
How Did The Communication Happen?
The JavaScript code sends a command via the bridge to the native layer, which executes it and returns the result back through the bridge.
This communication was asynchronous, meaning JavaScript would send a request and continue execution without waiting for a response, ensuring smooth operation of the UI thread.
Issues with the Old Architecture
- Asynchronous Nature: The asynchronous nature of the bridge caused delays when JS and native code needed to communicate frequently, leading to performance lags. For example, animations or interactions requiring constant back-and-forth communication between JS and native layers felt sluggish.
- Overhead: Serializing and deserializing data between JS and native layers added significant processing overhead.
- Startup Time: All native modules were initialized at app startup, even if they weren’t immediately needed, causing slow launch times for apps.
- Debugging and Errors: Debugging issues between JS and native layers was challenging due to limited error reporting and difficulty in tracing bugs across the asynchronous bridge.
- Limited Multi-Threading Support: The old renderer operated primarily on a single thread, meaning complex updates could block user interactions and UI responsiveness.
The New Architecture: Key Concepts
To address the issues with the old architecture, React Native team introduced a new architecture, focusing on:
- Fabric: A new rendering system.
- TurboModules: A revamped system for native modules.
- Codegen: A tool to automate and ensure type-safe communication between JS and native layers.
Fabric Renderer:
Fabric replaces the old renderer to:
- Enables synchronous communication between the JavaScript thread and native UI components.
- Supports React’s concurrent features, like Suspense and Transitions, allowing smoother and more responsive user interfaces.
- Operates across multiple threads, enabling background updates without blocking the main UI thread.
TurboModules: The new TurboModules system replaces the old native modules approach, introducing:
JavaScript Interface (JSI): Enables faster, synchronous communication between JavaScript and native code while supporting lazy loading of modules, which helps reduce app startup time.
C++ Implementation: A unified codebase for native modules, enabling reuse across platforms (Android, iOS, Windows, etc.).
Codegen
Codegen ensures that:
- The JS and native layers have a strongly typed contract, catching errors early during development.
- Boilerplate code is automatically generated for developers, reducing manual coding errors and speeding up development.
Benefits and Features of the New Architecture
The new architecture brings significant improvements over its predecessor
Performance Gains
- Synchronous Communication: Eliminates delays caused by the asynchronous bridge, improving responsiveness for real-time interactions like animations.
- Lazy Loading: Native modules are loaded only when required, drastically reducing startup times.
- Thread Management: Supports multi-threaded rendering, allowing high-priority tasks (e.g., user inputs) to preempt low-priority ones (e.g., animations).
Enhanced Developer Experience
- Better Debugging: Direct communication between JS and native code offers improved error reporting and debugging tools.
- Codegen Automation: Generates type-safe bindings between JS and native code, catching bugs early and reducing manual boilerplate work.
- React 18 Integration: Full support for concurrent features like Suspense, allowing complex UI components to load without blocking user interactions.
Migration
In React Native 0.76, the New Architecture and React 18 are enabled by default, so new apps can use them out of the box. Apps on older versions need to upgrade, including updating Gradle and other dependencies, to align with the new standards. This upgrade unlocks performance benefits but requires incremental changes for older apps to fully leverage features like concurrent rendering.
For older apps, an interoperability layer ensures compatibility, allowing the app to run on the New Architecture while still using parts of the old one. Developers can gradually migrate modules to the New Architecture, addressing limitations like the inability to use custom Shadow Nodes or concurrent features immediately.
Additionally, over 850 libraries, including all with more than 200K weekly downloads, now support the New Architecture. This ensures smoother transitions for apps.
To Sum it Up…
The new architecture in React Native empowers developers to create faster, more responsive apps by introducing advanced tools and systems like Fabric and TurboModules. This evolution enables smoother transitions for older apps while ensuring modern standards for new projects, streamlining development and improving user experiences.
