So far we've discussed React Native's THREE threads (JS, native, shadow – see "React Native Reference"). But WHAT actually EXECUTES the JavaScript code on the JS thread? The answer for modern React Native apps: Hermes, a JavaScript engine built by Meta specifically for React Native.

Why not just use V8 (like Chrome/Node.js)?

V8 is optimized for use in browsers/servers, where users often already have an OPEN program that loads more JS code on demand. Mobile apps, by contrast, start completely fresh on EVERY open ("cold start") – here what matters most is how FAST the engine starts up and can parse/execute the JavaScript code for the first time, less the raw speed of long-running computations. Hermes is optimized EXACTLY for that.

The key trick: bytecode precompilation

Regular JS engines (V8, JavaScriptCore) parse and compile JavaScript SOURCE TEXT fresh on EVERY app start. Hermes moves PARSING into the build process: while the app is being built, the JavaScript code gets precompiled into Hermes BYTECODE (similar to how PHP's OPcache caches precompiled bytecode, but here already at BUILD time instead of at runtime) – at startup, the app only needs to LOAD already-finished bytecode, not PARSE source text.

Hermes is the default – checking whether it's active

Since React Native 0.70, Hermes is the DEFAULT engine for new Expo/React Native projects – our produktkatalog-app already uses Hermes without us configuring anything. You can verify this in app.json:

{
  "expo": {
    "jsEngine": "hermes"
  }
}

If jsEngine is missing entirely, the Hermes default still applies – the explicit entry is only for clarity/documentation in the project.

Debugging with Hermes: an important caveat

Since Hermes bytecode doesn't map 1:1 to readable JavaScript source text, debugging needs SOURCE MAPS to trace errors/breakpoints back to the original lines – Expo/Metro generate these automatically in development mode. Use "React for Professionals" chapter 30's npx react-devtools setup or the integrated React Native DevTools from chapter 4 of this series – both understand Hermes source maps natively.

Analyzing bundle size with Hermes bytecode

npx expo export --platform android
# The Hermes bytecode ends up in dist/... - size can be checked directly on the filesystem

Unlike the plain JavaScript bundle from "React for Professionals" chapter 46, the Hermes bytecode file tends to be LARGER than the original, minified JS (bytecode is less dense than compressed text) – the benefit is NOT in file size, it's exclusively in the AVOIDED parse time at app start.