Will Kencel

Redefining Mobile Apps: Inside React Native's Revolutionary Architecture Update

Redefining Mobile Apps: Inside React Native's Revolutionary Architecture Update

In the vibrant world of mobile development, React Native has stood out as the leading framework, allowing developers to build native applications using familiar web technologies. Since 2018, The RN team has been working on a new paradigm for the architecture that has finally become the stable default version with the release of React Native 0.76. This advancement propels React Native into a future of efficiency, responsiveness, and adaptability, reshaping the landscape of mobile application development.

A Leap Forward: What the New Architecture Brings

This stable release of the new architecture is a culmination of efforts that date back to 2018, involving a comprehensive redesign of the systems at the core of React Native. This release also introduces full support for modern React features, including Suspense, Transitions, automatic batching, and more. The most notable improvement is the introduction of the New Native Module and Component systems, enabling type-safe code with direct native interface access without relying on a cumbersome bridge. Essentially, we now no longer need to do asynchronous calling with the bridge and can run synchronously with the native modules!

Getting React Native in Sync

Traditionally, React Native operated on an asynchronous bridge. While this approach was beneficial for preventing main thread blockage, it often faced limitations with synchronous updates and high-frequency rendering requirements. The architectural makeover addresses these challenges head-on, ensuring that React Native applications exhibit the responsiveness users demand from native mobile experiences. This bridge component has been replaced by the JavaScript Interface (JSI).

Bridge in Old and New Architecture

This groundbreaking change allows direction communication between the React Native renderer and the native renderer via the JavaScript Interface. This means React Native no longer needs to make asynchronous calls to the bridge and now enables it to seamlessly and synchronously interact with the native modules. This eradicates overheads, accelerates startup times, and sharpens error reporting with the new React Native devtools.

New Capabilities: Native Modules, Renderer, and the Event Loop

At the heart of this architectural transformation is the innovative Native Module System, now crafted in robust C++, which allows for the synchronous access to native runtimes. This advancement eliminates the need for asynchronous callbacks, which were previously necessary with the bridge component. It opens up the potential for easier cross-platform code sharing and improved performance through lazy module loading. While JavaScript itself lacks inherent type safety, the New Architecture introduces a code generation tool (Codegen) that defines a strongly typed interface between the JavaScript and native layers. This mitigates common sources of errors and crashes in cross-platform applications, enhancing overall robustness and reliability.

The new Renderer is another key innovation. It can handle multiple in progress trees across multiple threads allowing updates to be processed simultaneously and enable the real-time reading of layout information, i.e. useLayoutEffect. This capability ensures that complex user interfaces run smoothly without lag or visual glitches. Written in C++, this new Renderer is used consistently across various platforms, including iOS, Android, Windows, and macOS.

Add to this the Event Loop which, aligned with web specifications, allows React Native to handle JavaScript tasks predictably. This feature aligns React Native's behavior more closely with web standards, facilitating code sharing between React Native apps and web applications that use the React DOM. It also serves as a foundation for introducing more browser-like functionalities in React Native, enhancing the consistency of experiences across platforms.

In Depth Diagram of New Architecture

More Improvements

The latest release of React Native introduces significant enhancements to core components like FlatList and TextInput, optimizing them for greater performance and functionality. These components now benefit from more efficient rendering and memory management, allowing for smoother scrolling and faster input responses, even with large datasets or complex layouts.

Libraries such as Reanimated leverage these improvements by effectively managing animations and transitions across multiple threads. This approach reduces jank and provides a more seamless user experience, crucial for complex animations or high-frequency updates.

Developers can now also harness the full potential of React's Concurrent features, facilitating a clearer separation between urgent and non-urgent updates. By using transitions, React Native allows developers to prioritize immediate actions (like button presses) over less critical ones (like data fetching), enhancing the UI's responsiveness and dynamism in complex applications.

Moreover, automatic batching in React Native has been significantly refined. It intelligently groups multiple state updates into a single render, minimizing intermediate states and reducing unnecessary re-renders. This optimization accelerates rendering times and contributes to a more fluid user experience, all achieved without requiring additional code from developers.

Rendering Before and After New Architecture

A Unified Vision: Collaborative Innovation

The realization of this transformative architecture is the result of collaboration with leading technology entities, including Meta, Microsoft, and a diverse array of open-source contributors. Esteemed partners like Expo and Software Mansion have aligned efforts with dedicated members of the React Native team to forge a platform that is not only more powerful but also more inclusive and accessible.

React Native 0.76 represents a fundamental milestone rather than just a mere update. It embodies a strategic commitment to transcend traditional limitations, embracing new systems of architecture to increase performance to empower it as the most popular mobile development framework it is today. As developers delve into the capabilities of the new architecture, it is clear that the future of React Native is promising and bright.

Sources