React Native New Architecture: Migration Guide and Real Performance Data

The React Native New Architecture has been 'coming soon' for so long that teams stopped paying attention. Now it's stable, the migration path is clear, and the performance improvements are real and measurable. We've completed 12 migrations. Here's what you'll actually encounter.

What Actually Changed in the New Architecture

• JSI (JavaScript Interface): Replaces the old async bridge. JavaScript can now call native code synchronously. This eliminates the serialisation/deserialisation overhead that caused dropped frames during heavy native interactions.
• Fabric: The new rendering system. Components render on the UI thread with synchronous state updates. Solves the 'animation jank during JS thread congestion' problem that was endemic to the old architecture.
• TurboModules: Native modules are now lazy-loaded and accessible via JSI rather than the bridge. Startup time improvements are significant — we measured 200–400ms faster cold starts on older Android devices.
• Codegen: Strongly typed interfaces between JS and native, generated at build time. This is a double-edged sword — great for correctness, source of most migration breaking changes.

The Breaking Changes You Will Hit

• Native modules must use TurboModule spec: Any custom native module built with the old NativeModules pattern needs to be rewritten to use TurboModuleSpec.
• ViewManagers must use Fabric spec: Custom native UI components need the new Fabric component spec. This is the most involved migration step.
• Synchronous native calls change behaviour: Code that relied on the async bridge's 'post to next frame' timing may behave differently when JSI makes calls synchronous.