New Architecture Internals - JSI, Fabric & Hermes

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 apps

Tip

Practice Task

Quick Quiz

Common Mistake