Hermes: Features, Capabilities and Optimization for React Native

What Is Hermes?

Hermes is a compact JavaScript engine created by the Meta team specifically for React Native. It was announced in 2019 as an alternative to JavaScriptCore (JSC), which was used in React Native by default. The main goal of Hermes is to provide the fastest possible startup for mobile applications, especially on Android with limited resources.

The key feature of Hermes is ahead-of-time (AOT) compilation. Unlike traditional JS engines that compile code at runtime (JIT — Just-in-Time), Hermes compiles JavaScript into bytecode during the app build phase. This means no compilation happens on the device — the bytecode is immediately executed by the Hermes virtual machine.

Hermes is not a universal JS engine — it is optimized exclusively for React Native scenarios. It lacks features not needed in mobile development: eval, generators, and some ES6 features. This allows the engine to be more compact and faster. According to Meta, the size of Hermes is approximately 200–300 KB compressed, which is significantly smaller than JSC (about 2–3 MB).

Hermes Architecture and Bytecode

The Hermes architecture differs from traditional JS engines by lacking a JIT compiler. Instead, Hermes uses an efficient virtual machine (VM) that executes pre-compiled bytecode. Abandoning JIT provides three key advantages: predictable performance, lower memory consumption, and reduced startup time.

Hermes bytecode is a compact representation of JavaScript code optimized for fast execution. During the build phase (via Metro), JavaScript files are compiled into .hbc (Hermes Bytecode) files. The app loads these files, and the Hermes VM executes them without additional compilation. The build process is integrated into Metro through the hermes-transformer plugin.

Code Processing Stages

The JavaScript processing flow in Hermes consists of three stages: Parse — syntactic analysis of the source code, Compile — translation into bytecode, Execute — bytecode execution by the virtual machine. The first two stages run during the build phase, the third runs on the device. This is fundamentally different from JSC, where all three stages run on the device.

# Hermes bytecode compilation during build
hermes -emit-binary -out index.hbc index.js

# Check generated bytecode size
ls -lh index.hbc

# Display bytecode statistics
hermes -dump-bytecode index.hbc

# Optimize bytecode for production
hermes -O index.js -emit-binary -O target.hbc

After compilation, all .hbc files are packaged into APK or IPA along with native code. When the app starts, the Hermes VM loads the bytecode and begins execution almost instantly — no JIT warm-up time is needed, which is typical for V8 and JSC.

Hermes vs JSC: Comparison

Comparing Hermes and JavaScriptCore (JSC) helps understand when to choose which engine. JSC is a full-featured JS engine from Apple, used in Safari. Hermes is a specialized engine for React Native. The choice between them depends on project priorities.

Hermes wins in startup speed and memory consumption but lags behind JSC in complex computation performance. JSC’s JIT compilation optimizes hot code paths during execution, giving it an advantage on CPU-intensive operations. For a typical React Native app, where UI updates and navigation make up the primary workload, Hermes provides a better user experience through fast startup.

Hermes Optimizations for React Native

Hermes includes several optimizations specific to React Native. The main one is integration with JSI (JavaScript Interface). Hermes supports JSI natively, allowing the use of the new React Native architecture (Fabric + Turbo Modules) without additional layers. This makes Hermes and the new architecture the ideal pair for maximum performance.

Memory Management

Hermes uses a generational garbage collector (generational GC) optimized for mobile devices. Unlike JSC, where garbage collection can cause noticeable UI pauses (jank), Hermes performs GC in small increments between frames, minimizing the impact on user experience. According to Meta, GC pauses in Hermes are 2–3 times shorter than in JSC on typical React Native scenarios.

Lazy Require and Constants

Hermes supports lazy module loading — a JavaScript module is compiled only when it is actually needed. This reduces bytecode size and speeds up startup. Additionally, Hermes evaluates constant expressions at compile time, replacing function calls with constant values where possible.

// Hermes-specific optimizations example

// 1. Hermes inlines constant expressions
const TAX_RATE = 0.07;
const price = 100;
// Hermes pre-computes: TAX_RATE * price during compilation
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes optimizes property access chains
const config = { api: { timeout: 5000 } };
// Hermes caches config.api access internally
const timeout = config.api.timeout;
fetch(url, { timeout });

It is important to note that Hermes supports debugging via Chrome DevTools (starting from Hermes 0.12). Developers can use familiar tools: breakpoints, memory profiling, variable inspection. This eliminates one of the main objections to Hermes in early versions, where debugging was limited.

Setting Up Hermes in a React Native Project

Setting up Hermes depends on the React Native version. Starting from React Native 0.70, Hermes is enabled by default for new projects. For projects created earlier, or when switching between engines, configuration is done through build settings.

Android Setup

For Android, Hermes is enabled in the android/app/build.gradle file using the hermesEnabled flag. For iOS, configuration is done in the Podfile using the :hermes_enabled variable. After changing the configuration, you need to reinstall pods and rebuild the project.

// android/app/build.gradle — enable Hermes
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — enable Hermes
hermes_enabled = true
pod 'hermes-engine'

To verify that Hermes is running in your app, run adb logcat | grep Hermes on Android or check the Xcode console on iOS. When the app starts, Hermes outputs a message like “Hermes VM initialized” or similar. You can also check globalThis.HermesInternal in JavaScript code — if Hermes is active, this property will be available.

// Check if Hermes is running
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Hermes engine active');
  console.log(
    'Version:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes not active (fallback to JSC)');
}