New Architecture Internals — JSI, Fabric & Hermes
The New Architecture is not just a performance upgrade — it changes the fundamental execution model of React Native. Understanding it lets you make better architecture decisions and debug performance issues at the root cause.
How the New Architecture Changes Execution
- **JSI (JavaScript Interface)**: JavaScript holds C++ host objects directly — no serialization, no async bridge. Calling `nativeView.measure()` is now a synchronous function call that returns immediately
- **Fabric Renderer**: Rebuilds the UI layer. React's reconciler produces a Shadow Tree (in C++), Yoga calculates layout, and Fabric applies mutations to native views — all synchronously. This unlocks React 18 concurrent features on mobile
- **Turbo Modules**: Native modules are lazy-loaded — only imported when `TurboModuleRegistry.get('MyModule')` is first called. Reduces cold start by ~30% for apps with many native modules
- **Codegen**: Your TypeScript/Flow spec files are parsed at build time to generate type-safe C++ bindings. This catches type mismatches at build time instead of runtime crashes
- **Hermes**: Compiles JavaScript to bytecode at build time — the device loads and executes pre-compiled bytecode, not raw JS text. TTI (time to interactive) improvement: 20-50% depending on app
- **Bridgeless mode** (RN 0.73+): Bridge entirely removed. All native ↔ JS communication uses JSI. Enables synchronous events (e.g., gesture handlers that don't drop frames)
Measure Hermes Impact
// Check if Hermes is active at runtime
const isHermes = () => typeof HermesInternal !== 'undefined';
console.log('Hermes active:', isHermes()); // should be true in production builds
// Profile JS execution in Hermes (Flipper → Hermes Debugger)
// or React Native DevTools in RN 0.73+
// ---- Bundle size comparison ----
// Without Hermes: raw JS → JIT compiled at runtime (slow start)
// With Hermes: bytecode pre-compiled → instant execution
// To verify bytecode is being used:
// Android: check android/app/build.gradle
// project.ext.enableHermes = true
// Expo: Hermes is the default engine in SDK 48+
// To opt out (rare): in app.json
// "expo": { "jsEngine": "jsc" }
// ---- Memory profiling ----
// Android: adb shell dumpsys meminfo com.yourapp.package
// Look for: Java Heap, Native Heap, PSS total
// Hermes uses ~20% less memory than JSC on typical appsTip
Tip
Practice New Architecture Internals JSI Fabric Hermes in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
React Native bridges JavaScript and native platform code
Practice Task
Note
Practice Task — (1) Write a working example of New Architecture Internals JSI Fabric Hermes from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with New Architecture Internals JSI Fabric Hermes is skipping edge case testing — empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready react native code.
Key Takeaways
- The New Architecture is not just a performance upgrade — it changes the fundamental execution model of React Native.
- *JSI (JavaScript Interface)**: JavaScript holds C++ host objects directly — no serialization, no async bridge. Calling `nativeView.measure()` is now a synchronous function call that returns immediately
- *Fabric Renderer**: Rebuilds the UI layer. React's reconciler produces a Shadow Tree (in C++), Yoga calculates layout, and Fabric applies mutations to native views — all synchronously. This unlocks React 18 concurrent features on mobile
- *Turbo Modules**: Native modules are lazy-loaded — only imported when `TurboModuleRegistry.get('MyModule')` is first called. Reduces cold start by ~30% for apps with many native modules