React Native architecture: threads, Hermes, JSI and Fabric

HOW IT FITS TOGETHER

KEY TERMS

Threads

The UI (main) thread owns host views and touch input. The JS thread runs React render and your handlers. A background thread runs layout and commit. A frame is lost when the UI thread is blocked or when JS-driven work misses the frame deadline; a busy JS thread alone freezes JS logic but native scrolling and UI-thread animations keep running.

Hermes

The default engine, bundled per React Native release. Hermes V1 became the default on iOS and Android in 0.84. Release builds compile JavaScript to bytecode at build time, which is what makes startup fast; `global.HermesInternal` tells you Hermes is running, not that you are loading precompiled bytecode.

JSI

A C++ API between the JS engine and native code. JS can hold references to C++ host objects and call their methods synchronously, without the old bridge's JSON serialization and batching. Synchronous is a capability, not a default: a slow sync call blocks the JS thread.

Fabric

The C++ renderer: render (JS thread) builds an immutable shadow tree, commit (background) runs Yoga layout and promotes the tree, mount (UI thread) diffs, flattens and applies mutations. Immutability is what lets it be thread-safe and lets high-priority updates run synchronously on the UI thread.

TurboModules and Codegen

Native modules loaded lazily over JSI. You write a typed spec (TypeScript or Flow), and Codegen generates the C++/ObjC++/Java glue and native interfaces at build time, so type mismatches fail the build instead of crashing at runtime. 0.88 maps ArrayBuffer for Java TurboModules, so binary data no longer needs Base64.

New Architecture only, bridgeless

Since 0.82 `newArchEnabled=false` and `RCT_NEW_ARCH_ENABLED=0` are ignored; 0.81 and Expo SDK 54 were the last releases with the Legacy Architecture. 0.84 stopped shipping legacy code in iOS builds. An interop layer still lets many old-style libraries run, but it is a bridge to the past, not a target.

Expo, CNG and Expo Modules

Expo is the framework the React Native docs recommend. "Managed vs bare" is retired terminology: with Continuous Native Generation, `npx expo prebuild` generates the ios/ and android/ folders from app config and config plugins, so they can be gitignored; you can still commit and hand-edit them instead. Expo Modules are a Swift/Kotlin DSL over JSI and work in any React Native app that depends on the expo package. SDK 58 ships React Native 0.88.

IN YOUR STACK

// specs/NativeLocalStorage.ts: Codegen reads this file at build time
import type { TurboModule } from "react-native";
import { TurboModuleRegistry } from "react-native";

export interface Spec extends TurboModule {
  setItem(value: string, key: string): void;
  getItem(key: string): string | null; // sync over JSI: keep it O(1)
  removeItem(key: string): void;
  clear(): void;
}

export default TurboModuleRegistry.getEnforcing<Spec>("NativeLocalStorage");

// package.json
// "codegenConfig": {
//   "name": "NativeLocalStorageSpec",
//   "type": "modules",
//   "jsSrcsDir": "specs",
//   "android": { "javaPackageName": "com.nativelocalstorage" },
//   "ios": { "modulesProvider": { "NativeLocalStorage": "RCTNativeLocalStorage" } }
// }

// App.tsx
import NativeLocalStorage from "./specs/NativeLocalStorage";
const draft = NativeLocalStorage.getItem("draft");

import ExpoModulesCore
public class PowerModule: Module {
  private var observer: NSObjectProtocol?
  public func definition() -> ModuleDefinition {
    Name("Power")
    Events("onLowPowerModeChange")
    // Sync: returns directly through JSI on the JS thread. Keep it trivial.
    Function("isLowPowerMode") { () -> Bool in
      ProcessInfo.processInfo.isLowPowerModeEnabled
    }
    // Async: runs off the JS thread and resolves a Promise.
    AsyncFunction("thermalState") { () -> Int in
      ProcessInfo.processInfo.thermalState.rawValue
    }
    OnStartObserving {
      self.observer = NotificationCenter.default.addObserver(
        forName: .NSProcessInfoPowerStateDidChange, object: nil, queue: nil
      ) { [weak self] _ in
        self?.sendEvent("onLowPowerModeChange", ["enabled": ProcessInfo.processInfo.isLowPowerModeEnabled])
      }
    }
    OnStopObserving { if let o = self.observer { NotificationCenter.default.removeObserver(o) } }
  }
}

package expo.modules.power

import android.content.Context
import android.os.Build
import android.os.PowerManager
import expo.modules.kotlin.modules.Module
import expo.modules.kotlin.modules.ModuleDefinition

class PowerModule : Module() {
  private val powerManager: PowerManager
    get() = appContext.reactContext!!.getSystemService(Context.POWER_SERVICE) as PowerManager

  override fun definition() = ModuleDefinition {
    Name("Power") // same name as iOS: one JS API, two implementations

    Function("isLowPowerMode") {
      powerManager.isPowerSaveMode
    }

    AsyncFunction("thermalState") {
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) powerManager.currentThermalStatus else -1
    }
  }
}

import { Pressable } from "react-native";
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
import { scheduleOnRN, scheduleOnUI } from "react-native-worklets";

export function LikeButton({ onLiked }: { onLiked: () => void }) {
  const scale = useSharedValue(1); // readable and writable from both runtimes

  // A worklet: re-evaluated on the UI thread whenever scale changes.
  const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));

  const pop = () => {
    "worklet";
    scale.value = withSpring(1.3, {}, (finished) => {
      scale.value = withSpring(1);
      if (finished) scheduleOnRN(onLiked); // hop back to the JS thread
    });
  };

  return (
    <Pressable onPress={() => scheduleOnUI(pop)} accessibilityRole="button" accessibilityLabel="Like">
      <Animated.View style={[{ width: 48, height: 48, borderRadius: 24, backgroundColor: "tomato" }, style]} />
    </Pressable>
  );
}

// Globals in React Native 0.83+, visible in the DevTools Performance panel
// and observable at runtime, including in release builds.
declare function report(metric: { type: string; name: string; ms: number }): void;
declare const api: { getFeed(): Promise<unknown[]> };

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === "longtask" || entry.duration > 100) {
      report({ type: entry.entryType, name: entry.name, ms: Math.round(entry.duration) });
    }
  }
});
observer.observe({ entryTypes: ["measure", "event", "longtask"] });

export async function loadFeed() {
  performance.mark("feed:start");
  const items = await api.getFeed();
  performance.mark("feed:fetched");
  performance.measure("feed:fetch", "feed:start", "feed:fetched");
  return items;
}

// Non-standard: native init, bundle start and runtime-ready timestamps
const { startTime, executeJavaScriptBundleEntryPointStart, endTime } = performance.rnStartupTiming;

import { FlashList, useRecyclingState } from "@shopify/flash-list";
import { Text } from "react-native";

type Row = { id: string; kind: "header" | "message"; text: string };

function MessageRow({ item }: { item: Row }) {
  // Cells are recycled: plain useState would leak "expanded" into the next row drawn here.
  const [expanded, setExpanded] = useRecyclingState(false, [item.id]);
  return <Text numberOfLines={expanded ? undefined : 2} onPress={() => setExpanded((e) => !e)}>{item.text}</Text>;
}

export function Inbox({ rows }: { rows: Row[] }) {
  return (
    <FlashList
      data={rows}
      keyExtractor={(row) => row.id}
      getItemType={(row) => row.kind} // separate recycle pools per layout
      renderItem={({ item }) =>
        item.kind === "header" ? <Text accessibilityRole="header">{item.text}</Text> : <MessageRow item={item} />
      }
    />
  );
}

WHEN TO REACH FOR WHAT

WHERE IT BITES

• Profiling debug builds: dev mode adds checks and loads source instead of bytecode, so JS can look several times slower than in release. Measure release builds on a low-end Android device.
• Heavy work in event handlers or render (JSON parsing, sorting big arrays, synchronous storage reads) blocks the JS thread; presses queue up and JS-driven animations stall even though native scrolling continues.
• Making native calls synchronous because JSI allows it. Disk, network and keychain access belong in Promise-returning (AsyncFunction) methods.
• Plain useState inside recycled FlashList cells leaks state between rows; key it with useRecyclingState or lift it into the data.
• Upgrading past 0.82 with libraries that use legacy NativeModules or UIManager APIs: they run only through the interop layer, which is not guaranteed forever. Check each dependency's New Architecture support before the upgrade, not after.
• Editing generated ios/ or android/ folders in a CNG project: the next `expo prebuild --clean` or EAS build overwrites them. Put native changes in a config plugin.

WHEN IT BREAKS IN PRODUCTION

• Animations and gestures stutter in the React Native app
• A long list loads and scrolls slowly
• Android says the app isn't responding
• The app works in debug but crashes in release
• A broken mobile release is already in production

SOURCES

• React Native: Render, Commit, and Mount (opens in new tab)Checked 2026-11-06
• React Native: Threading Model (opens in new tab)Checked 2026-11-06
• React Native 0.82: A New Era (New Architecture only) (opens in new tab)Checked 2026-11-06
• React Native 0.84: Hermes V1 by Default (opens in new tab)Checked 2026-11-06
• React Native 0.88: Web-based event dispatching, ArrayBuffer for Java TurboModules (opens in new tab)Checked 2026-11-06
• React Native: global performance (rnStartupTiming, timeOrigin) (opens in new tab)Checked 2026-11-06
• Expo: Continuous Native Generation (opens in new tab)Checked 2026-11-06
• Expo SDK 58 changelog (opens in new tab)Checked 2026-11-06