Hermes: wat is het, mogelijkheden en optimalisatie voor React Native

Hermes vs JSC: vergelijking

De vergelijking van Hermes en JavaScriptCore (JSC) helpt te begrijpen wanneer welke engine te kiezen. JSC — een volwaardige JS-engine van Apple, gebruikt in Safari. Hermes — een gespecialiseerde engine voor React Native. De keuze tussen hen hangt af van de prioriteiten van het project.

Hermes wint in startsnelheid en geheugengebruik, maar verliest van JSC in uitvoeringsprestaties van complexe berekeningen. JIT-compilatie van JSC optimaliseert hete code-gedeelten tijdens runtime, wat een voordeel geeft bij CPU-intensieve bewerkingen. Voor een typische React Native-applicatie, waar UI-updates en navigatie de belangrijkste belasting vormen, biedt Hermes een betere gebruikerservaring door de snelle start.

Hermes optimalisaties voor React Native

Hermes bevat verschillende optimalisaties die specifiek zijn voor React Native. De belangrijkste is integratie met JSI (JavaScript Interface). Hermes ondersteunt JSI native, wat het mogelijk maakt de nieuwe architectuur van React Native (Fabric + Turbo Module) te gebruiken zonder extra lagen. Dit maakt Hermes en de nieuwe architectuur een ideaal paar voor maximale prestaties.

Geheugenbeheer

Hermes gebruikt een garbage collector met een generatiestrategie (generational GC), geoptimaliseerd voor mobiele apparaten. In tegenstelling tot JSC, waar garbage collection merkbare pauzes in de UI (jank) kan veroorzaken, voert Hermes GC uit in kleine porties tussen frames, waardoor de impact op de gebruikerservaring wordt geminimaliseerd. Volgens Meta zijn GC-pauzes in Hermes 2–3 keer korter dan in JSC in typische React Native-scenario's.

Lazy loading en constanten

Hermes ondersteunt lazy loading van modules — een JavaScript-module wordt alleen gecompileerd wanneer deze echt nodig is. Dit vermindert de grootte van de bytecode en versnelt het opstarten. Bovendien berekent Hermes constante expressies in de compilatiefase, waarbij functieaanroepen waar mogelijk worden vervangen door constante waarden.

// Voorbeeld van Hermes-specifieke optimalisaties

// 1. Hermes inlineert constante expressies
const TAX_RATE = 0.07;
const price = 100;
// Hermes berekent vooraf: TAX_RATE * price tijdens compilatie
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes optimaliseert eigenschapstoegangsketens
const config = { api: { timeout: 5000 } };
// Hermes cached config.api-toegang intern
const timeout = config.api.timeout;
fetch(url, { timeout });

Het is belangrijk op te merken dat Hermes debuggen via Chrome DevTools ondersteunt (vanaf Hermes versie 0.12). De ontwikkelaar kan vertrouwde tools gebruiken: breakpoints, geheugenprofilering, variabele inspectie. Dit elimineert een van de belangrijkste bezwaren tegen Hermes in vroege versies, toen debuggen beperkt was.

Hermes configureren in een React Native project

De configuratie van Hermes hangt af van de React Native-versie. Sinds React Native 0.70 is Hermes standaard ingeschakeld voor nieuwe projecten. Voor eerder gemaakte projecten of bij het schakelen tussen engines, wordt de configuratie uitgevoerd via de build-instellingen.

Configuratie voor Android

Voor Android wordt Hermes ingeschakeld in het bestand android/app/build.gradle via de vlag hermesEnabled. Voor iOS wordt de configuratie uitgevoerd in de Podfile via de variabele :hermes_enabled. Na het wijzigen van de configuratie moeten de pods opnieuw worden geïnstalleerd en het project opnieuw worden gebouwd.

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

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

Om te controleren of Hermes in de applicatie wordt gebruikt, voert u adb logcat | grep Hermes uit op Android of controleert u de Xcode-console op iOS. Bij het starten van de applicatie toont Hermes het bericht „Hermes VM initialized” of een vergelijkbaar bericht. U kunt ook globalThis.HermesInternal uitvoeren in JavaScript-code — als Hermes actief is, is deze eigenschap beschikbaar.

// Controleer of Hermes actief is
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Hermes-engine actief');
  console.log(
    'Versie:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes niet actief (terugval naar JSC)');
}