React Native has officially launched version 0.76, a release that takes the framework to the next level by enabling the new architecture as the default setting. In earlier versions, this architecture was optional and required developers to opt in. But now, all new React Native projects will come with this transformative architecture, commonly referred to as the “Bridgeless” architecture. This blog dives into what makes the new React Native architecture a game-changer.
The Bridgeless architecture has been a hot topic for the past year, and with good reason. But what does “Bridgeless” actually mean, and why does it matter? To appreciate the advantages of the new architecture, let’s first review the limitations of the previous model and how this update moves beyond them.
Recap of Old Architecture
- Two Worlds of React Native are – JavaScript & Native.
- There are three threads:
a. JavaScript Thread: Handles all JavaScript bundle code execution.
b. Main/UI Native Thread: Manages native modules and updates to the user interface.
c. Background/Shadow Thread: Also known as the Yoga thread, it’s responsible for calculating layout and positioning of elements.
- The communication medium between the JavaScript and Native code is the “Bridge”.
- Components are serialized into JSON in the JS layer and sent asynchronously through bridge to the native layer, which again deserializes the code and converts the component to native component to render on screen. Also the native layer sends the JSON back when an event occurs.
Performance Issues in React Native’s Old Architecture
- Jerky or empty frames
- Dropped frames during animations
- Slow startup times
- Flickering frames on screen transitions
- Node duplication and memory leaks
- Blocking of the UI thread
- Inconsistent performance across platforms (iOS vs. Android)
Key Goals of React Native’s New Architecture:
The new architecture is designed to address the limitations of the previous version. Its key goals include:
🚀 Faster startup times
⚙️ Concurrent rendering support
📱 Enhanced app responsiveness
🌐 Cross-platform compatibility
🛠️ Reduced crash rates
💾 Improved memory management
🔄 Synchronous execution
New Architecture
React Native’s New Architecture is a complete rewrite of its core system which includes how components are rendered, how javascript abstraction communicates with native abstraction and how tasks/updates are scheduled across different threads.
The New Architecture has 4 main parts:
- The New Native Module
- The New Renderer
- The Event Loop
- Removing the Bridge
The New Native Module
The New Native Module is entirely written in C++ which majorly rewrites how JS and native platforms communicate.
New Capabilities:
- Synchronous updates to and from the native runtime
JS layer can now communicate with native layer directly with JavaScript Interface(JSI), without asynchronous bridge. Custom Native Modules can now synchronously call a function, return a value, and pass that value back to another Native Module function.
// ❌ Sync callback from Native Module
nativeModule.getValue(value => {
// ❌ value cannot reference a native object
nativeModule.doSomething(value);
});In Old Architecture, the native function call’s response can be handled by providing a callback and the returned value needs to be serializable.
// ✅ Sync response from Native Module
const value = nativeModule.getValue();
// ✅ value can be a reference to a native object
nativeModule.doSomething(value);In New Architecture, the native functions calls and responses are synchronous.
- Type safety between JS & native code
Codegen enables modules to define a strongly typed contract between JavaScript and native layers, reducing cross-boundary type errors—a common source of crashes in cross-platform apps—while also generating boilerplate code automatically.
- Cross Platform code sharing
The New Module System supports C++ modules, enabling cross-platform compatibility across Android, iOS, Windows, and macOS. Writing modules in C++ allows for better memory management and performance optimization.
- Lazy module loading by default
Modules are now lazily loaded, reducing startup time by loading them into memory only when needed, ensuring fast performance even as app complexity increases.
It support for both synchronous and asynchronous updates. This hybrid approach brings a significant leap in application responsiveness. Synchronous updates ensure that user interactions are processed instantly without waiting for background tasks, creating a seamless and native-like experience. Meanwhile, asynchronous updates allow background tasks to run smoothly without interrupting the main user interface.This dual-mode rendering strikes the perfect balance between performance and usability, making applications feel faster, more fluid, and highly optimized for real-world scenarios.
The New Renderer: Key Highlights
1.Multi-Threaded Processing
- Rendering tasks are distributed across threads based on priority, reducing the load on the main thread.
Benefits: Critical updates (e.g., animations, user inputs) are handled immediately, while background tasks (e.g., layout updates) run on separate threads.
2. Immutable UI Tree
- UI is stored in immutable snapshots, ensuring thread-safe updates.
- Multiple UI versions can be processed simultaneously, enabling parallel updates and efficient rendering
3.Background Processing with Multiple In-Progress Trees
- Background updates proceed without blocking the main thread.
- Features: Smooth transitions, parallel updates, and interruptible processing for urgent tasks.
4.Synchronous Layout Reads
- Layout information can be accessed instantly across threads for quick updates (e.g., repositioning tooltips).
Why It Matters
- Responsiveness: Instant user input handling.
- Non-Blocking Updates: Background tasks don’t disrupt the UI.
- Consistency: Thread-safe and predictable UI state.
Fluid Experiences: Seamless transitions and visually uninterrupted updates.
The Event Loop
1.Well-Defined Event Loop
- Aligns React Native’s JavaScript thread processing with React DOM and web standards, simplifying cross-platform development.
- Enables predictable task ordering and better behavior consistency between React DOM and React Native.
2.Benefits
- Interruptible Updates: Low-priority tasks can be paused for urgent user events, improving responsiveness.
- Web Alignment: Matches web specifications for events, timers, and tasks, enhancing familiarity and code sharing.
Foundation for Browser Features: Prepares React Native for future support of features like MutationObserver and IntersectionObserver.
3.Synchronous Layout Reads
- Supports useLayoutEffect for synchronous layout reads and updates within the same frame, ensuring accurate UI positioning.
These changes make React Native more predictable, responsive, and aligned with web development standards, paving the way for future enhancements.
Removing the Bridge
Removing the Bridge has brought the direct communication between JavaScript and Native code using JavaScript Interface.
This removal has improved the startup time.
In Old Architecture in the old architecture, in order to provide global methods to JavaScript, we would need to initialize a module in JavaScript on startup, causing a small delay in app startup time.
// ❌ Slow initialization
import {NativeTimingModule} from 'NativeTimingModule';
global.setTimeout = timer => {
NativeTimingModule.setTimeout(timer);
};
// App.js
setTimeout(() => {}, 100);
In New Architecture with JSI, React Native now provides direct communication between JavaScript and native code, bypassing the need for the Bridge. This overhaul results in:
- Faster Startup Times: Modules no longer require early initialization in JavaScript, streamlining app startup.
- Improved Error Reporting: Enhanced diagnostics for JavaScript crashes make debugging easier, especially during app initialization.
- Reduced Crashes: Removing undefined behaviors associated with the Bridge enhances app stability.
// ✅ Initialize directly in C++
runtime.global().setProperty(runtime, "setTimeout", createTimer);
// App.js
setTimeout(() => {}, 100);Backward Compatibility and Future Plans
While the New Architecture minimizes reliance on the Bridge, it remains available for backward compatibility, ensuring developers can migrate at their own pace. Over time, the Bridge will be entirely phased out as apps adopt the New Architecture.
Gradual Migration to React Native 0.76
React Native 0.76 enables the New Architecture and React 18 by default, but full adoption requires gradual migration to unlock all benefits, including concurrent features.
Key Points
- Initial Upgrade: Most apps can upgrade to 0.76 with usual effort. An interoperability layer ensures apps run on the New Architecture while still supporting legacy code.
- Limitations of Interop Layer: Custom Shadow Nodes and concurrent features are not supported in the interop layer.
- Concurrent React Support: To use concurrent features, apps must follow the Rules of React and migrate JavaScript code using the React 18 Upgrade Guide.
Migration Strategy
- Upgrade to the New Architecture without breaking existing code.
- Gradually migrate modules and surfaces to the New Architecture.
- Once fully migrated, enable concurrent features for new and updated surfaces.
Library Support
- Over 850 popular libraries, including those with 200K+ weekly downloads, are already compatible.
- Check library compatibility on reactnative.directory.
Conclusion
The migration to React Native 0.76 and its New Architecture represents a major leap forward for developers, offering enhanced performance, smoother workflows, and access to modern features like Concurrent React. By providing a seamless interoperability layer, React Native ensures that existing applications can transition without disruption while allowing developers to gradually adopt the full benefits of the New Architecture at their own pace.
With robust support from the React Native community and widespread library compatibility, this upgrade marks a pivotal step toward a faster, more responsive, and future-ready framework. By embracing these changes, developers can build high-performance, scalable apps that leverage the best of both native and web development practices.
