In this lesson, you will learn how the JavaScript engine acts as the "brain" that executes your application logic inside React Native.
What is a JavaScript Engine?
When you write React Native code, you are writing standard JavaScript. However, your mobile device’s processor (CPU) cannot "read" JavaScript directly. It needs a translator to convert that high-level code into machine instructions. That translator is the JavaScript Engine.
Think of the engine as a high-speed interpreter. Whether it is Hermes (the default engine optimized for React Native) or V8 (the engine behind Chrome), its role is to ingest your bundle.js file—which contains all your component logic and state updates—and execute the commands defined within it.
Browser vs. React Native Engines
You might be used to running JavaScript in a browser. In a web browser, the engine is tightly bundled with APIs like the window object or document (DOM) to render HTML.
In React Native, the engine exists in a standalone environment. It doesn't have access to browser-specific features because there is no HTML or DOM. Instead, it interacts with the React Native bridge:
// This is your logic inside the JS Engine
const handlePress = () => {
// The engine processes this logic
// Then it sends a message across the bridge
// to update the native UI
updateUI('Button Pressed');
};
When you call a function in your app, the engine processes that logic and determines what needs to happen next. It then prepares a "serialized" message (which we covered in our previous lessons) to send across the bridge, signaling the Native thread to change the screen.
Why Hermes Matters
While V8 is great for browsers, React Native often uses Hermes. Hermes is a specialized engine designed to be "pre-compiled." Instead of the engine needing to figure out what your code means while the app is opening, Hermes converts your code into bytecode ahead of time. This makes your app start faster and use less memory on a phone compared to a desktop-class engine.
Key Takeaway: The JavaScript Engine is the translator that executes your application logic, operating independently of the browser to send instructions through the bridge for the Native thread to render.