React Native Just Got 10x Smoother, Faster, and Powerful!
About the New Architecture
In 2018, the React Native team began revamping React Native’s internal design, aiming to help developers build higher-quality apps. This updated version, known as the “New Architecture,” is now powering major apps (like those at Meta) as of 2024. This architecture isn’t just a new framework — it’s also a plan to bring these upgrades to open source.
Why a New Architecture?
The React Native team noticed several limitations in the old architecture that prevented developers from building polished experiences. These limitations were ingrained in the older design, so the team decided to invest in a new, forward-looking structure.
The New Architecture removes these roadblocks, allowing for smoother and more advanced app features.
Key Features of the New Architecture
1. Synchronous Layout and Effects
With the old architecture, developers used the onLayout event to get a view’s layout (its size and position). However, this approach could lead to visual “jumps” as layout updates weren’t instant, leading to a laggy user experience.
The New Architecture fixes this by allowing synchronous access to layout data, so updates are applied smoothly, without intermediate visual states.
2. Support for Concurrent Renderer and Features
The New Architecture supports concurrent rendering, letting developers use modern React features like Suspense, Transitions, and other recent APIs. This creates consistency between web and native development, making codebases simpler to manage.
For example, concurrent rendering offers automatic batching. This feature combines multiple updates into one, reducing unnecessary re-renders and improving performance.
Example: Using Transitions to prioritize important UI updates, making the app more responsive.
3. Fast JavaScript/Native Interfacing with JSI
The New Architecture replaces the older asynchronous bridge with JavaScript Interface (JSI), a new way for JavaScript to interact with native code directly. This removes the need for slow data conversions, enabling high-performance features.
Example: VisionCamera, a library in React Native, uses JSI to process real-time video frames efficiently, handling large amounts of data (up to 1 GB per second) without delays.
What to Expect from Enabling the New Architecture
While the New Architecture offers powerful features, simply turning it on won’t instantly improve performance. You may need to adapt your code to make full use of features like synchronous layouts and concurrent capabilities.
Even though JSI reduces memory overhead, if data conversion wasn’t a major issue in your app before, you might not notice a drastic improvement right away. But this is an investment in React Native’s future.
Ongoing Improvements and Future Plans
The React Native team is continually adding new capabilities to the New Architecture. They’re focusing on areas like:
- Updates to the event loop model
- Enhanced node and layout APIs
- Better styling and layout consistency
Developers can participate and track these changes through the official discussions and proposals repository.
This new React Native architecture aims to future-proof the framework, bringing powerful new features and performance improvements, helping developers build faster, more adaptable, and polished applications.
