Loading MOBILE::INTERNALS...
“In the Legacy React Native architecture, JavaScript and Native (Java/Obj-C) communicated by serializing messages into JSON strings over an asynchronous message queue (The Bridge). The New Architecture replaces this with the JavaScript Interface (JSI)—a lightweight C++ API that allows JavaScript code to directly hold references to C++ HostObjects and invoke native methods synchronously with zero serialization.”
Why JSON serialization over the asynchronous bridge created UI stutter, and how JSI exposes direct C++ memory pointers.
// JSI C++ HostObject Invocation (Zero Serialization)
class NativeMathHostObject : public jsi::HostObject {
public:
jsi::Value get(jsi::Runtime &runtime, const jsi::PropNameID &name) override {
auto propName = name.utf8(runtime);
if (propName == "fastMultiply") {
return jsi::Function::createFromHostFunction(
runtime, name, 2,
[](jsi::Runtime &rt, const jsi::Value &thisVal, const jsi::Value *args, size_t count) -> jsi::Value {
double a = args[0].asNumber();
double b = args[1].asNumber();
return jsi::Value(a * b); // Direct synchronous C++ return
}
);
}
return jsi::Value::undefined();
}
};Legacy: JS thread serializes UI mutation into JSON payload [tag, method, args]
Legacy: Message waits in asynchronous bridge message queue (batched every 5ms)
Legacy: Native thread parses JSON and applies layout changes (causing gesture lag)
JSI New Architecture: Hermes JS engine instantiates a C++ HostObject
JSI: JavaScript invokes hostObject.invokeMethod() directly in a synchronous C++ call stack
JSI allows direct ArrayBuffer byte sharing between JavaScript and C++ without copying or JSON encoding, enabling 120 FPS camera filters.