Hermes engine in React Native - Deep Dive

Overview - Hermes engine

What is it?

Hermes is a JavaScript engine optimized for running React Native apps on mobile devices. It is designed to start apps faster, use less memory, and improve overall performance. Hermes compiles JavaScript code ahead of time into a format that runs efficiently on phones. This helps apps feel quicker and smoother for users.

Why it matters

Without Hermes, React Native apps rely on general JavaScript engines that are not tailored for mobile, causing slower app startup and higher memory use. This can make apps feel sluggish and drain battery faster. Hermes solves these problems by making JavaScript run faster and lighter on phones, improving user experience and saving device resources.

Where it fits

Before learning about Hermes, you should understand basic React Native app structure and how JavaScript runs in mobile apps. After Hermes, you can explore advanced performance tuning, native module integration, and debugging tools specific to React Native.

Mental Model

Core Idea

Hermes is a special JavaScript engine that makes React Native apps start faster and use less memory by compiling code ahead of time for mobile devices.

Think of it like...

Imagine Hermes as a chef who prepares ingredients before cooking, so the meal is ready to serve quickly, instead of chopping everything while guests wait.

┌───────────────┐
│ React Native  │
│   App Code   │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Hermes Engine │
│ (Ahead-of-Time│
│  Compilation) │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Mobile Device │
│  Executes JS  │
└───────────────┘

Build-Up - 7 Steps

1

Foundation

What is a JavaScript engine

Concept: Introduce the idea of a JavaScript engine as the program that runs JavaScript code on devices.

A JavaScript engine reads and executes JavaScript code. On phones, it runs the code that makes apps interactive. Common engines include V8 (Chrome) and JavaScriptCore (iOS). React Native uses these engines to run app logic written in JavaScript.

Result

You understand that JavaScript engines are the core programs that run app code on devices.

Knowing what a JavaScript engine does helps you see why its speed and memory use affect app performance.

2

Foundation

How React Native uses JavaScript engines

Concept: Explain React Native’s use of JavaScript engines to run app code and communicate with native parts.

React Native apps write UI and logic in JavaScript. The JavaScript engine runs this code and talks to native mobile components to display screens and handle user actions. The engine’s speed affects how fast the app responds and starts.

Result

You see that the JavaScript engine is the bridge between app code and the phone’s native features.

Understanding this bridge clarifies why improving the engine improves app speed and smoothness.

3

Intermediate

What makes Hermes different from others

🤔Before reading on: do you think Hermes runs JavaScript the same way as other engines or differently? Commit to your answer.

Concept: Hermes uses ahead-of-time compilation and optimizations tailored for mobile to run JavaScript faster and lighter.

Unlike engines that interpret or just-in-time compile JavaScript at runtime, Hermes compiles JavaScript into bytecode before the app runs. This reduces startup time and memory use. Hermes is built specifically for React Native on Android and iOS.

Result

You understand Hermes’s unique ahead-of-time compilation and mobile focus.

Knowing Hermes compiles code ahead of time explains why apps start faster and use less memory.

4

Intermediate

How Hermes improves app startup speed

🤔Before reading on: do you think compiling code before running helps or slows app startup? Commit to your answer.

Concept: Hermes reduces the work done when the app launches by precompiling JavaScript, so the engine can start running code immediately.

Normally, engines parse and compile JavaScript when the app starts, causing delays. Hermes precompiles code into bytecode during app build, so the engine loads this ready-to-run code quickly. This cuts down the time users wait to see the app.

Result

Apps using Hermes launch noticeably faster on mobile devices.

Understanding startup delays come from runtime compilation shows why ahead-of-time compilation speeds things up.

5

Intermediate

Memory savings with Hermes engine

Concept: Hermes uses less memory by optimizing how JavaScript objects and strings are stored and managed.

Hermes uses compact data structures and efficient garbage collection tuned for mobile. It reduces memory overhead compared to other engines, which helps apps run smoothly on devices with limited RAM.

Result

Apps consume less memory, reducing crashes and improving multitasking on phones.

Knowing memory is limited on phones highlights why Hermes’s optimizations matter for app stability.

6

Advanced

Debugging and profiling with Hermes

🤔Before reading on: do you think Hermes supports standard React Native debugging tools or requires special ones? Commit to your answer.

Concept: Hermes integrates with React Native debugging tools and adds its own profiling features to help developers find performance issues.

Hermes supports Chrome DevTools and Flipper for debugging JavaScript. It also provides a profiler to measure CPU and memory use. This helps developers optimize app performance and fix bugs efficiently.

Result

Developers can debug and profile Hermes-powered apps with familiar tools plus Hermes-specific insights.

Knowing Hermes supports debugging tools prevents surprises and encourages performance tuning.

7

Expert

Hermes internals and bytecode execution

🤔Before reading on: do you think Hermes executes JavaScript source code directly or runs a special compiled format? Commit to your answer.

Concept: Hermes compiles JavaScript source into bytecode, a compact intermediate format, which its virtual machine executes efficiently on mobile CPUs.

Hermes’s compiler transforms JavaScript into bytecode ahead of time. The Hermes VM reads this bytecode, which is smaller and faster to load than source code. This reduces parsing and speeds execution. The VM also manages memory with a garbage collector optimized for mobile.

Result

Hermes runs JavaScript faster and with less memory by executing bytecode instead of source code.

Understanding bytecode execution reveals why Hermes outperforms engines that parse source code at runtime.

Under the Hood

Hermes works by compiling JavaScript source code into a compact bytecode format during app build time. This bytecode is stored in the app bundle. At runtime, the Hermes virtual machine loads and executes this bytecode directly, skipping the usual parsing and compilation steps. The VM includes a garbage collector optimized for mobile memory constraints and a runtime that efficiently manages JavaScript objects and functions.

Why designed this way?

Hermes was designed to solve React Native’s slow startup and high memory use on mobile devices. Traditional JavaScript engines parse and compile code at runtime, which delays app launch and uses more memory. Ahead-of-time compilation and a lightweight VM reduce these costs. The design balances performance with the constraints of mobile CPUs and limited RAM, unlike desktop-focused engines.

┌─────────────────────────────┐
│  React Native JavaScript     │
│        Source Code          │
└─────────────┬───────────────┘
              │ Compile Ahead-of-Time
              ▼
┌─────────────────────────────┐
│        Hermes Bytecode       │
│  (Compact, Precompiled JS)  │
└─────────────┬───────────────┘
              │ Load & Execute
              ▼
┌─────────────────────────────┐
│     Hermes Virtual Machine   │
│  - Bytecode Interpreter     │
│  - Garbage Collector        │
│  - Memory Manager           │
└─────────────┬───────────────┘
              │
              ▼
┌─────────────────────────────┐
│       Mobile Device CPU      │
│   Executes Bytecode Fast     │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does Hermes support iOS React Native apps fully? Commit to yes or no.

Common Belief: Hermes only works on Android and cannot be used for iOS React Native apps.

Reality: Hermes supports both Android and iOS React Native apps starting from React Native 0.64 and later.

Why it matters: Believing Hermes is Android-only may prevent developers from enabling it on iOS, missing out on performance gains.

Quick: Does Hermes run JavaScript slower because it uses bytecode? Commit to yes or no.

Common Belief: Because Hermes uses bytecode, it runs JavaScript slower than engines that interpret source code directly.

Reality: Hermes runs JavaScript faster because bytecode loads and executes more quickly than parsing source code at runtime.

Why it matters: Thinking Hermes is slower may discourage its use, causing apps to miss startup and memory improvements.

Quick: Does enabling Hermes require rewriting React Native app code? Commit to yes or no.

Common Belief: You must rewrite or heavily modify your React Native app code to use Hermes.

Reality: Hermes works with existing React Native code without changes; it is a drop-in replacement JavaScript engine.

Why it matters: Believing code changes are needed may stop developers from enabling Hermes, losing easy performance benefits.

Quick: Does Hermes eliminate all JavaScript performance issues in React Native apps? Commit to yes or no.

Common Belief: Using Hermes means your React Native app will have no JavaScript performance problems.

Reality: Hermes improves startup and memory use but does not fix all performance issues; app code and native modules still affect speed.

Why it matters: Overestimating Hermes can lead to ignoring other optimizations and debugging needs.

Expert Zone

1

Hermes’s garbage collector uses a generational approach optimized for short-lived objects common in React Native apps, reducing pause times.

2

Hermes bytecode format is designed to be compact and load quickly, but it also supports lazy loading of functions to save memory.

3

Hermes integrates tightly with React Native’s JSI (JavaScript Interface) to enable efficient calls between JavaScript and native code.

When NOT to use

Hermes is not ideal if your app relies heavily on JavaScript features not yet supported by Hermes, such as certain ES2021+ syntax or debugging tools. In such cases, using JavaScriptCore or V8 might be better until Hermes support improves.

Production Patterns

In production, Hermes is enabled to improve startup and memory use. Developers use Hermes profiling tools to identify bottlenecks. Some apps bundle Hermes bytecode separately for faster updates. Teams also monitor Hermes VM versions to leverage ongoing performance improvements.

Connections

Ahead-of-Time (AOT) Compilation

Hermes uses AOT compilation to convert JavaScript source into bytecode before runtime.

Understanding AOT compilation in other languages like Swift or C++ helps grasp how Hermes speeds up app startup by precompiling code.

Virtual Machines (VMs)

Hermes is a specialized VM that executes bytecode efficiently on mobile devices.

Knowing how VMs work in general, like the Java Virtual Machine, clarifies Hermes’s role in running code abstracted from hardware.

Mobile App Performance Optimization

Hermes is a key tool in the broader practice of optimizing mobile app speed and memory use.

Recognizing Hermes as part of performance tuning helps developers combine engine choice with code and UI optimizations.

Common Pitfalls

#1 Enabling Hermes without updating React Native version.

Wrong approach:

In react-native.config.js:
module.exports = {
hermesEnabled: true,
};
// but using React Native 0.62 or older

Correct approach:

Upgrade React Native to 0.64 or newer before enabling Hermes:
module.exports = {
hermesEnabled: true,
};

Root cause:

Older React Native versions do not support Hermes properly, causing build or runtime errors.

#2 Ignoring Hermes bytecode size increase in app bundle.

Wrong approach:

Enable Hermes but do not monitor app bundle size or optimize assets.

Correct approach:

After enabling Hermes, analyze bundle size and use tools like Proguard or Hermes bytecode compression to keep app size manageable.

Root cause:

Hermes bytecode adds to app size; neglecting this leads to unexpectedly large apps.

#3 Assuming Hermes fixes all app performance issues automatically.

Wrong approach:

Enable Hermes and skip profiling or optimizing app code.

Correct approach:

Use Hermes profiling tools and continue optimizing JavaScript and native modules for best performance.

Root cause:

Hermes improves engine performance but does not replace good app design and optimization.

Key Takeaways

Hermes is a JavaScript engine built to make React Native apps start faster and use less memory on mobile devices.

It achieves this by compiling JavaScript into bytecode ahead of time, reducing runtime work and speeding execution.

Hermes supports both Android and iOS React Native apps without requiring code changes.

While Hermes improves performance, developers still need to profile and optimize app code for best results.

Understanding Hermes’s internals and debugging tools helps developers build smoother, more efficient mobile apps.

Practice

1. What is the main purpose of the Hermes engine in React Native?

easy

A. To add new UI components automatically

B. To make apps start faster and use less memory

C. To convert JavaScript code to native Android code

D. To manage app navigation between screens

Solution

1. Step 1: Understand Hermes role

   Hermes is a JavaScript engine designed to improve app performance.

2. Step 2: Identify its benefits

   It helps apps start faster and reduces memory and battery use.

3. Final Answer:

   To make apps start faster and use less memory -> Option B

4. Quick Check:

   Hermes improves app speed and memory use = A [OK]

Hint: Hermes speeds up app start and saves memory [OK]

Common Mistakes:

• Thinking Hermes adds UI components
• Confusing Hermes with native code compiler
• Believing Hermes manages navigation

2. Which of the following is the correct way to enable Hermes in a React Native Android project?

easy

A. Add hermesEnabled = true in index.js

B. Import Hermes from 'react-native-hermes' in App.js

C. Set enableHermes: true in android/app/build.gradle

D. Set useHermes = true in package.json

Solution

1. Step 1: Locate Hermes enabling method

   Hermes is enabled in the Android build config file android/app/build.gradle.

2. Step 2: Confirm correct syntax

   The correct setting is enableHermes: true inside the project.ext.react block.

3. Final Answer:

   Set enableHermes: true in android/app/build.gradle -> Option C

4. Quick Check:

   Enable Hermes in build.gradle = B [OK]

Hint: Enable Hermes in android/app/build.gradle [OK]

Common Mistakes:

• Trying to enable Hermes in JavaScript files
• Using wrong property names like useHermes
• Adding Hermes import statements

3. Given this React Native code snippet running with Hermes enabled, what is the expected behavior?

console.log('App started');
setTimeout(() => console.log('Timeout done'), 0);
console.log('End of script');

medium

A. Logs: 'App started', 'End of script', 'Timeout done'

B. Logs: 'End of script', 'App started', 'Timeout done'

C. Logs: 'Timeout done', 'App started', 'End of script'

D. Logs: 'App started', 'Timeout done', 'End of script'

Solution

1. Step 1: Understand JavaScript event loop with Hermes

   Even with Hermes, JavaScript runs synchronously first, then asynchronous callbacks.

2. Step 2: Trace the console logs order

   First logs 'App started', then 'End of script', then the setTimeout callback logs 'Timeout done'.

3. Final Answer:

   Logs: 'App started', 'End of script', 'Timeout done' -> Option A

4. Quick Check:

   Sync logs before async timeout = D [OK]

Hint: setTimeout callback runs after synchronous code [OK]

Common Mistakes:

• Assuming setTimeout runs immediately
• Confusing Hermes behavior with normal JS
• Expecting logs in wrong order

4. You enabled Hermes in your React Native app but it crashes on startup. Which of these is the most likely cause?

medium

A. You forgot to clean and rebuild the project after enabling Hermes

B. You did not import Hermes in your JavaScript files

C. You set enableHermes: false in build config

D. You used unsupported React Native components

Solution

1. Step 1: Identify common Hermes setup errors

   After enabling Hermes, the project must be cleaned and rebuilt to apply changes properly.

2. Step 2: Understand why skipping rebuild causes crashes

   Without rebuild, old native binaries conflict with Hermes causing startup crashes.

3. Final Answer:

   You forgot to clean and rebuild the project after enabling Hermes -> Option A

4. Quick Check:

   Clean and rebuild fixes Hermes crashes = A [OK]

Hint: Always clean and rebuild after enabling Hermes [OK]

Common Mistakes:

• Thinking Hermes needs JS imports
• Ignoring rebuild step
• Blaming unrelated components

5. You want to reduce your React Native app's memory usage on Android. How can Hermes help, and what must you do to enable it properly?

hard

A. Hermes reduces memory by lazy loading components; enable it by adding hermesLazyLoad: true in package.json

B. Hermes reduces memory by compressing images; enable it by importing Hermes in App.js

C. Hermes reduces memory by caching network data; enable it by setting cacheHermes: true in android/app/build.gradle

D. Hermes reduces memory by optimizing JS execution; enable it by setting enableHermes: true and rebuilding the app

Solution

1. Step 1: Understand Hermes memory optimization

   Hermes optimizes JavaScript execution to use less memory and battery.

2. Step 2: Know how to enable Hermes correctly

   Set enableHermes: true in android/app/build.gradle and rebuild the app to apply changes.

3. Final Answer:

   Hermes reduces memory by optimizing JS execution; enable it by setting enableHermes: true and rebuilding the app -> Option D

4. Quick Check:

   Enable Hermes in build config and rebuild = C [OK]

Hint: Enable Hermes in build config and rebuild to save memory [OK]

Common Mistakes:

• Thinking Hermes compresses images
• Trying to enable Hermes via JS imports
• Using wrong config keys like cacheHermes