Learn React Native - New Architecture Deep Dive

#Introduction

In episode 2 you got to know the New Architecture from a distance. Now it's time to dissect it: what actually happens when a React component is rendered, why native calls can be synchronous, and how the library ecosystem adapts.

Episode 17 digs deep into Fabric and JSI, the interop layer that keeps legacy libraries alive, TurboModules, then migration strategies — when to enable the New Architecture and how to make sure supporting libraries are ready. Since 0.76 this is the default, but understanding its layers is still important when facing performance issues.

#Fabric: The Asynchronous Renderer

#From Shadow Tree to Host View

When a React component is rendered, React produces a UI description. Fabric takes that description and turns it into native host views — UIView on iOS and View on Android — through several stages:

React element -> React tree -> shadow tree -> host view native

#Atomic and Asynchronous Commits

Fabric introduces the concept of an atomic commit: UI changes are grouped and applied all at once, so no half screen appears with mixed state. Heavy work can be moved off the UI Thread, and synchronization with React 19's rendering system becomes possible.

#Concrete Benefits

Fabric brings reduced UI Thread work, faster startup time, and support for features that were previously difficult, such as interop with libraries that use their own rendering. For app developers, the impact is felt in more stable scrolling and animations.

#JSI: Synchronous Native Calls

#Replacing Bridge Serialization

The legacy bridge went through JSON serialization and asynchronous communication. JSI (JavaScript Interface) connects JavaScript directly to native objects — JavaScript can hold references to native objects and call their methods without going through serialized messages.

#When Synchronous Helps

With JSI, libraries like Reanimated can execute animations directly on the UI Thread, and MMKV can read and write storage synchronously from JavaScript. For your app, native calls that were slow in the legacy architecture can become instant.

Example of a modern native call

import { MMKV } from "react-native-mmkv";
 
const storage = new MMKV();
storage.set("kunci", "nilai"); // sinkron, tanpa serialisasi
const nilai = storage.getString("kunci");

Note the synchronous storage.set("kunci", "nilai") — the result is immediately available without a promise or bridge queue. This is the real difference developers feel.

#Interop Layer for Legacy Libraries

#Bridging Two Eras

The ecosystem has thousands of libraries written for the legacy bridge. The interop layer in the New Architecture adapts legacy modules automatically, so an app can enable the New Architecture without waiting for all libraries to be rewritten.

#The Cost of Interop

Interop preserves compatibility, but its performance remains bridge-like: there's serialization and async limitations. Libraries that use JSI directly are still faster. Check each library's support status before migrating — episode 21 shows how to check on reactnative.directory.

#TurboModules and Lazy Loading

#Loading Only What's Used

TurboModules changes how native modules are loaded: from all-at-once-at-startup to lazy — only loaded when called. This meaningfully cuts startup time, especially in apps with many native modules.

#Interop and TurboModules

Natively written TurboModules use JSI and can be called synchronously. Legacy modules are adapted through interop and keep working. When choosing a library, the performance preference is clear: native TurboModules are better than interop'd legacy modules.

#Migration Strategy

#Audit Libraries First

Before enabling the New Architecture, audit all dependencies:

reactnative.directory/library/<nama-library>

Check New Architecture support, the minimum React Native version, and any open issues in the repository. Libraries that don't support it yet can use interop, but validate with thorough testing.

#Enable Gradually

Since 0.76 the New Architecture is on by default, so for new projects there's no extra step. For legacy projects still on the old architecture, enable it via a configuration flag:

newArchEnabled=true

After enabling, run the full test suite, test native libraries one by one, and monitor startup metrics and stability before a full release.

#Closing

Episode 17 dissected the New Architecture: Fabric as an asynchronous renderer with atomic commits, JSI enabling synchronous native calls, the interop layer for legacy libraries, TurboModules with lazy loading, and a safe migration strategy.

Key takeaways:

• Fabric renders host views through the shadow tree with atomic commits.
• JSI connects JavaScript directly to native without serialization.
• The interop layer keeps legacy libraries running, but slower than JSI.
• TurboModules load native modules lazily for fast startup.
• Audit all libraries before enabling the New Architecture.
• Test thoroughly and provide a rollback during migration.

In the next episode, episode 18, we'll discuss performance and profiling: React DevTools, the Performance Monitor, and native profiling, then optimization with Hermes, fewer re-renders, list virtualization, and Reanimated animations.