React Native started with a simple, ambitious idea:
shares
React Native started with a simple, ambitious idea:
Write UI in JavaScript. Run it natively.
That idea worked — and scaled further than many expected. But as React Native apps grew into full-fledged products with complex UI, heavy native integrations, and strict performance budgets, the original architecture began to show its limits.
This post walks through why the legacy Bridge fell short, what the New Architecture actually changes, and how JSI, TurboModules, and Fabric work together in real apps today.
This is not a speculative roadmap. This is how React Native is evolving to meet modern mobile demands.
The Evolution of React Native
Early React Native apps were relatively simple:
- Limited native surface area
- Moderate UI complexity
- Tolerable latency between JS and native
Over time, teams began pushing React Native into:
- Gesture-heavy interfaces
- Secure and cryptographic workloads
- Real-time UI updates
- Performance-sensitive flows (payments, onboarding, authentication)
The original architecture could support these use cases — but not efficiently, predictably, or at scale.
Legacy Architecture: Quick Context
How the Old Bridge Worked
In the legacy architecture:
- JavaScript and Native ran on separate threads
- Communication happened through a Bridge
- Data was serialized to JSON
- Calls were asynchronous only
- Messages were batched before crossing the boundary
This design was pragmatic and portable — but it came with tradeoffs.
Where It Broke Down
In production, teams consistently ran into:
- High overhead for frequent JS ↔ native calls
- UI lag during complex interactions
- Startup cost from eagerly loaded native modules
- Friction when exposing advanced native APIs
The Bridge worked — but it wasn’t built for today’s performance expectations.
Why a New Architecture Was Needed
Modern mobile apps increasingly require:
- Synchronous access to native APIs
- Better control over threads and scheduling
- Fine-grained rendering and layout updates
- Easier, safer native extensibility
- Predictable performance under load
The core problem wasn’t JavaScript. It was the message-passing model itself. That realization led to the React Native New Architecture, centered around JSI.
Core Pillars of the New Architecture
The New Architecture is built on three foundational pieces:
- 1. JSI (JavaScript Interface)
- 2. TurboModules
- 3. Fabric Renderer
Each solves a specific bottleneck of the legacy system. Together, they fundamentally change how React Native behaves.
JSI (JavaScript Interface): The Foundation
What JSI Is
JSI allows JavaScript to directly interact with native code through C++.
- No Bridge
- No JSON serialization
- No mandatory async boundary
Instead of message passing, React Native moves to direct native interop.
Why This Matters in Practice
With JSI:
- JavaScript can make synchronous or asynchronous native calls
- Objects can be shared without serialization
- The system is JavaScript engine–agnostic (Hermes, JSC, V8)
- Core logic can live in a shared C++ layer across platforms
This is the architectural shift that everything else builds on.
JSI turns React Native from “JS talking to native” into “JS running with native.”
TurboModules: Modern Native Modules
What Are TurboModules?
TurboModules replace legacy Native Modules and are built directly on top of JSI.
Key improvements:
- Lazy loading (modules load only when accessed)
- Strongly typed interfaces
- Faster startup times
- Cleaner ownership of native APIs
Where TurboModules Shine
TurboModules are especially valuable for:
- Hardware access (camera, sensors)
- Secure storage
- Cryptography
- High-frequency native calls
In these cases, removing serialization and async overhead isn’t a micro-optimization — it changes what’s feasible.
Fabric: The New Rendering System
What Is Fabric?
It replaces the legacy renderer with a system designed for concurrency and precision.
Why Fabric Matters
Fabric enables:
- Concurrent rendering
- Synchronous layout updates when needed
- Better interaction and gesture handling
- Shared rendering logic in C++
Fabric aligns React Native with React 18’s concurrent rendering model, allowing transitions and updates to behave more predictably under pressure.
How Everything Fits Together
At runtime, the system looks like this:
- JavaScript runs React logic
- UI updates flow through Fabric
- Native functionality is exposed via TurboModules
- Communication happens through JSI
- Overhead is minimized at every boundary
The result is not just faster code — but simpler mental models for performance-critical paths.
Performance Impact (What Actually Changes)
The biggest gain isn’t raw speed — it’s predictability.
Teams can now reason about performance without fighting the architecture.
When You Should Use the New Architecture
Strong Fit
- New React Native apps
- Performance-critical products
- Heavy native integrations
- Complex animations or gesture-driven UI
Be Cautious
- Apps dependent on unsupported third-party libraries
- Very old codebases without active maintenance
The New Architecture is the future — but migration still requires intent and planning.
Real-World Scenario (Fintech Example)
A common pattern in production fintech apps:
- UI & state → React Native
- UI & state → React Native
- Secure storage → Platform native APIs
- Rendering → Fabric
- Communication → JSI
Observed outcomes:
- Faster startup due to lazy native loading
- Smooth, interruption-free UI during sensitive flows
- Native-grade security without JS workarounds
This is where the architecture stops being theoretical.
Practical Best Practices
- Prefer TurboModules over legacy modules
- Keep JS ↔ native boundaries minimal
- Use Hermes for best JSI performance
- Avoid frequent cross-thread calls
- Design APIs intentionally: sync vs async is a decision, not a default
The Future of React Native
What’s already clear:
- The Bridge is being phased out
- The New Architecture is becoming the default
- React 18 integration will deepen
- Tooling and type safety will improve
- React Native continues moving closer to true “write once, run native”
Final Takeaway
React Native is no longer:
“JavaScript talking to native through messages.”
It is now a unified, high-performance native platform, with JSI at its core and a rendering system built for modern UI demands.
The New Architecture isn’t just an upgrade. It’s a reset of what React Native can reasonably handle in production.