JSI: Bypassing the Bridge for Ultra‑Fast Native Calls

Insight

The React Native bridge is a reliable workhorse, but every round‑trip adds ~1 ms of latency—enough to feel sluggish in high‑frequency UI updates. JSI (JavaScript Interface) lets you expose native functions directly to JavaScript, eliminating the serialization step and enabling true synchronous calls. This is especially powerful for lightweight utilities like timestamping, cryptographic hashing, or sensor polling where you need sub‑millisecond response times.

Example

// native/TimeModule.cpp (C++)
#include <jsi/jsi.h>
using namespace facebook::jsi;

void installTimeModule(Runtime &rt) {
  Function getNow = Function::createFromHostFunction(
    rt, "getNow", 0,
    [](Runtime &rt, const Value &, const Value *args, size_t) {
      return Value((double)std::chrono::system_clock::now().time_since_epoch().count());
    }
  );
  rt.global().setProperty(rt, "getNow", std::move(getNow));
}

// App.tsx (JS/TS)
import {useEffect, useState} from 'react';
declare const getNow: () => number; // JSI global

export default function Clock() {
  const [now, setNow] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setNow(getNow()), 16);
    return () => clearInterval(id);
  }, []);
  return <Text>{now}</Text>;
}

Takeaway

When you need deterministic, low‑latency native interactions, expose the function via JSI instead of the bridge. Keep the API tiny, avoid heavy objects, and you’ll see smoother animations and faster sensor reads without extra native modules.