What makes React Native 0.76 a significant release?

React Native 0.76 marks the official debut of the New Architecture. It eliminates the JavaScript bridge, introduces native communication through C++, supports React 18’s concurrent features, and provides improved tools like enhanced DevTools. This release improves performance, responsiveness, and developer productivity.

Do I need to upgrade my app immediately?

While upgrading is recommended, there’s no rush. The New Architecture includes an automatic interoperability layer, allowing your current code to run without breaking. You can migrate incrementally at your own pace. If you want to migrate to React Native’s latest version, get in touch with WEDOWEBAPPS.

How will the migration impact our app’s performance?

You’ll notice faster startup times, better responsiveness, and support for new features like Suspense and Transitions. Concurrent React improves how updates are handled, leading to smoother user interactions without jank or delays. Get in touch to know more.

Do we need to change our JavaScript code to use React 18 features?

Yes, to use features like Transitions and Suspense, your code must follow React 18’s principles. Start with the React 18 Upgrade Guide to align your app with the new semantics gradually.

What happens if we encounter issues during migration?

Don’t worry about the migration. If you face any issues during the migration phase, our team of expert React Native developers will help you eliminate those as soon as possible.

What should I expect during the upgrade process?

When you upgrade, your app will run on the New Architecture by default with the interoperability layer, ensuring backward compatibility. You can gradually update components and modules to unlock the full benefits of concurrent features.

React Native 0.76 - Embracing Era With Performance and Modern Architecture

Introduction

React Native 0.76 has officially landed on npm, bringing with it the highly anticipated New Architecture. This release marks a significant milestone in the evolution of React Native, as detailed in the accompanying blog post. The New Architecture supports modern React features, including Suspense, Transitions, automatic batching, and useLayoutEffect. It also introduces revamped Native Module and Native Component systems, enabling developers to write type-safe code with direct access to native interfaces, effectively removing the need for a bridge. This update is the culmination of a comprehensive rewrite of React Native, a project that has been in development since 2018. The team has prioritized a gradual migration path, establishing the New Architecture Working Group in 2021 to facilitate a smooth transition for the community. Most applications should find adopting React Native 0.76 straightforward, as many popular libraries already align with the New Architecture. Additionally, an automatic interoperability layer ensures backward compatibility with libraries built for the previous architecture, easing the upgrade process for developers. With these advancements, React Native 0.76 positions itself as a robust choice for developers looking to leverage the latest in mobile technology. Here’s a concise rewrite that captures all the important points about the New Architecture:

What is the New Architecture?

The New Architecture is a complete overhaul of the core systems of React Native, improving component rendering, communication between JavaScript and native abstractions, and work scheduling across threads. While most users won’t need to delve into the technical details, these changes enhance performance and capabilities. In the previous architecture, React Native relied on an asynchronous bridge to communicate with native platforms, serializing and enqueuing calls. This design prevented the main thread from being blocked, ensuring smooth rendering and function calls. However, user expectations for immediate feedback required some updates to render synchronously, which the old system couldn’t accommodate. The old architecture also faced bottlenecks due to serialization, making it difficult to achieve consistent 60+ FPS, and synchronization issues could cause visual glitches when the JavaScript and native layers fell out of sync. Additionally, the single-threaded layout computation limited urgent updates, hindering responsiveness. To address these issues, the New Architecture includes four main components:

New Native Module System: Offers synchronous access to the native layer, allowing for both asynchronous and synchronous event handling and layout reading. Native modules are lazily loaded by default, enhancing performance.
New Renderer: Capable of managing multiple in-progress trees across threads, supporting concurrent updates and enabling responsive UIs without jank.
Event Loop: Processes tasks in a defined order, allowing urgent user interactions to interrupt rendering and align with web standards for features like microtasks and MutationObserver.
Removal of the Bridge: Facilitates faster startup and direct communication between JavaScript and the native runtime, improving error reporting and reducing crashes.

The New Architecture is now production-ready and successfully used at scale in Meta's Facebook app and others. Companies like Expensify and Kraken have already implemented it in their production environments, showcasing its effectiveness.

1. The New Native Module System

The new Native Module System, implemented in C++, offers a more seamless and efficient approach to handling complex tasks, akin to the way AI programming languages streamline communication in machine learning applications. By enabling direct communication between JavaScript and native code, developers can harness the full power of AI-driven apps with minimal latency. This upgrade brings several key benefits:

Synchronous communication with the native runtime
Type safety between JavaScript and native code
Code sharing across platforms
Lazy module loading by default

In the new system, JavaScript and the native layer can communicate synchronously via the JavaScript Interface (JSI), eliminating the need for an asynchronous bridge. This allows custom Native Modules to call functions and return values directly, enhancing functionality: Old Architecture

New Architecture

The New Module System allows the use of C++ for native implementations, ensuring modules work across platforms like Android, iOS, Windows, and macOS. This enhances memory management and performance optimizations. Additionally, Codegen defines a strongly typed contract between JavaScript and native layers, helping to prevent cross-boundary type errors that often cause crashes. It also generates necessary boilerplate code, streamlining development. Finally, with lazy loading, modules are only loaded when needed, reducing startup time and maintaining efficiency as the application scales. Libraries like react-native-mmkv have already benefited from migrating to the new Native Modules, showcasing the performance improvements.

2. New Render

The Native Renderer has undergone a complete rewrite, introducing several key enhancements: - Updates can now be rendered across multiple threads with varying priorities. - Layout information can be accessed synchronously across different threads. - The renderer, implemented in C++, is shared across all platforms. The updated Native Renderer organizes the view hierarchy in an immutable tree structure, ensuring thread-safe processing of updates. This allows for multiple in-progress trees, facilitating background rendering during transitions without blocking the UI or interrupting main-thread updates in response to user interactions. By supporting multiple threads, React can prioritize urgent updates, such as user input, while resuming lower-priority updates as needed. The ability to read layout information synchronously enables background calculations and immediate layout adjustments, like repositioning tooltips. Rewriting the renderer in C++ allows for consistent performance across platforms, including iOS, Android, Windows, and macOS, eliminating the need for platform-specific implementations. These changes align with the broader Many Platform Vision, as features like View Flattening—previously exclusive to Android—are now available on iOS, automatically benefiting from the shared C++ core. With these improvements, React Native fully supports Concurrent React features like Suspense and Transitions, enabling developers to create complex, responsive user interfaces free from jank and delays. Future updates will leverage this architecture to enhance built-in components such as FlatList and TextInput. This also opens the door for smoother integrations of UI components like a React carousel library, ensuring that dynamic elements like image sliders or carousels render efficiently without compromising performance.

3. The Event Loop

The New Architecture has enabled the implementation of a well-defined event loop processing model, which aligns with the HTML Standard. This model standardizes how React Native handles tasks on the JavaScript thread. By bridging gaps between React DOM and React Native, the event loop brings their behaviors closer together, making it easier for developers to learn once and write anywhere. Benefits of the Event Loop - Interruptible Rendering: The event loop allows React to pause low-priority updates to process urgent user events, enabling more responsive interactions. - Alignment with Web Specifications: It aligns event and timer behaviors with web standards, enhancing familiarity for developers transitioning between React DOM and React Native. - Foundation for Browser Features: While features like microtasks, MutationObserver, and IntersectionObserver are not yet available in React Native, the event loop sets the stage for their future implementation. Additionally, the event loop works in tandem with the New Renderer to support synchronous layout reading. This integration allows for proper implementation of `useLayoutEffect`, enabling developers to read layout information and update the UI within the same frame, ensuring elements are positioned correctly before being displayed.

4. Removal of the Bridge

In the New Architecture, React Native has completely eliminated its dependency on the bridge, opting instead for direct and efficient communication between JavaScript and native code through the JavaScript Interface (JSI). Benefits of Removing the Bridge - Improved Startup Time: By avoiding the need for bridge initialization, the app starts faster. In the old architecture, global methods required a module to be initialized at startup, which introduced delays: Removal of the Bridge

We can directly bind methods from C++ in the new architecture: Removal of the Bridges

- Enhanced Error Reporting: The rewrite improves error handling for JavaScript crashes during startup and reduces crashes due to undefined behavior. If issues arise, the updated React Native DevTools facilitate easier debugging. The bridge will remain available for backward compatibility during the gradual migration to the New Architecture, but it is planned for removal in future updates.

New Features in React Native's New Architecture 0.76

The New Architecture fully supports React 18, including concurrent features and `useLayoutEffect`. Key updates include:

1. Transitions

Introduced in React 18, transitions differentiate between urgent updates (like typing) and non-urgent ones (UI changes). This allows React Native to render these updates separately, enhancing user experience by making interactions feel immediate while deferring less critical updates. Developers can use the `startTransition` API to mark state updates as transitions:

This separation leads to a smoother UI, especially when rendering complex components.

2. Automatic Batching

With the New Architecture, React Native benefits from automatic batching introduced in React 18. This feature consolidates state updates, reducing the rendering of intermediate states and improving performance without requiring additional code from developers.

3. useLayoutEffect

The New Architecture allows for synchronous layout reading using `useLayoutEffect`, eliminating the need for asynchronous `onLayout` events. This means layout information can be accessed and updated within the same frame, allowing for precise positioning of UI elements: useLayoutEffect with The old architecture

useLayoutEffect with The new architecture useLayoutEffects

4. Full Support for Suspense

React Native now fully supports Suspense, enabling developers to manage loading states declaratively. This allows for smoother user interactions by rendering suspended content in the background while prioritizing user input on visible elements. Overall, these enhancements make React Native more powerful and responsive, allowing developers to create sophisticated applications that provide a seamless user experience.

React Native DevTools

The React Native team has announced the release of the first stable version of React Native DevTools. These are designed to enhance the debugging experience for the developers across all platforms. The team behind React Native has announced the release of the first stable version of React Native DevTools, designed to enhance the debugging experience for developers across all platforms. The end goal of these tools is to provide reliable, familiar, simple, and cohesive debugging tools. This new set of tools is closely aligned with browser developer tools and integrates seamlessly with React Native. The key features of React Native DevTools include:

Familiar, Web-Aligned Tooling: React native DevTools offers a fully featured Debugger based on Chrome DevTools. This debugger ensures reliable breakpoints, watch values, step-through debugging, stack inspection, and a complete JavaScript console. These necessary functions perform consistently across reloads.
Enhanced Integration with React DevTools: The updated tools include a built-in React components inspector and profiler which provides faster and more dependable component highlighting.
Improved User Experience: The launch of a new “Paused in Debugger” overlay clearly indicates when your application is halted at a breakpoint. Moreover, warnings in the LogBox are now summarized and hidden when DevTools are active. This streamlines the debugging process.
Reliable Reconnection Behavior: JavaScript breakpoints now maintain their functionality across reloads, even when DevTools disconnects and reconnects. The tools can also reconnect to the same application after a native rebuild.
Instant Launch: React Native DevTools is available by default with zero configuration required. Developers can easily access it through the in-app Dev Menu or by using the CLI server, which now supports multiple emulators and devices.

This release marks a significant departure from previous debugging options, including the Experimental Debugger introduced in version 0.73. The new DevTools utilize a completely rebuilt backend debugging stack developed over the past year, resulting in improved compatibility and a more reliable overall experience. The team plans to expand this new stack in future updates, with features like Performance and Network panels on the horizon.

Gradually Upgrade to React Native 0.76: What to Expect

The 0.76 release makes the New architecture and React 18 the default setup. For most apps, upgrading will be as simple as any other release, but taking full advantage of the New Architecture requires gradual migration of code and libraries. Key Points for Upgrading: - Interoperability Layer: On upgrade, apps will run on the New Architecture with an automatic interop layer to support old architecture code. While most apps won’t need immediate changes, this layer has some limitations, such as lacking access to custom Shadow Nodes and concurrent features. - Concurrent Features: To use features like Suspense and Transitions, apps must align with Concurrent React principles. - Gradual Migration: Developers can migrate at their own pace, starting with small sections of their apps. For new components fully migrated to the New Architecture, concurrent features are immediately available. Existing code may need updates before enabling these features. React Native's team has collaborated with the community to ensure smooth adoption. Over 850 popular libraries, including those with more than 200K weekly downloads, now support the New Architecture. This release aims to deliver a seamless upgrade path, helping developers modernize their apps without breaking existing functionality.

Breaking Changes - Removing the Bridge for Faster Performance

The New Architecture eliminates React Native’s reliance on the bridge, enabling direct communication between JavaScript and native code. This change improves performance, shortens startup times by avoiding bridge initialization, and enhances crash reporting and debugging. Example: Old vs. New Initialization Old Bridge-Based Initialization:

New Direct Initialization:

The bridge remains available temporarily for backward compatibility, but the long-term plan is to phase it out entirely. This transition ensures smoother, faster app performance without sacrificing functionality during migration.

Conclusion

React Native 0.76 marks a major milestone in the framework's evolution, delivering improved performance, seamless concurrent rendering, and better developer tools. While the transition to the New Architecture may require incremental adjustments, the upgrade path is designed to be smooth. With direct native communication and powerful new features, mobile app developers can build more responsive and efficient mobile apps. This release positions React Native as a forward-looking solution for creating high-performance cross-platform applications. If you are looking forward to considering React Native Mobile Application Development, WEDOWEBAPPS has the expertise you require. Get in touch.