React Native · Mobile UI at native speed
How did the legacy bridge work and what replaced it?
Short answer
The legacy bridge sent batched, serialised JSON messages asynchronously between JavaScript and native. JSI and the new architecture replace it with direct C++ references, synchronous calls where safe, and lazy TurboModules.
In the old architecture, calling a native module queued a message. The bridge batched messages, serialised them to JSON and delivered them to the other side asynchronously. That design kept threads isolated, but it added latency and made high-frequency calls expensive.
- Every call crosses a serialisation boundary
- Calls are asynchronous, so no immediate return value
- Batched delivery improves throughput but adds queueing delay
- Large payloads and frequent events can saturate the bridge and drop frames
- Modules are initialised eagerly, increasing startup work
What the new architecture changes
JSI exposes a C++ API that JavaScript engines can bind to, letting JavaScript hold a reference to a native object and call it without JSON. Fabric uses this for rendering, and TurboModules use it for native modules with lazy loading and generated type checks.
Legacy: JS -> serialise -> bridge queue -> deserialise -> native
New: JS -> JSI reference -> native host function -> return value or promiseJSI does not make everything synchronous. Blocking the JS thread on a slow native call is still bad. The win is lower overhead and the ability to choose synchronous calls for cheap operations such as reading a cached value.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Why was the bridge a performance bottleneck?
- 2Does JSI make all native calls synchronous?
- 3What is the interop layer?
- 4How do you migrate a legacy native module?
Say it in the interview
The legacy bridge serialised native calls into batched JSON messages, so every call paid serialisation and queueing cost, which hurt gestures and animations. JSI replaces that with direct C++ references, and Fabric and TurboModules use it for rendering and native modules. It does not mean everything becomes synchronous; I still avoid blocking the JS thread on slow native work.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live React Native mock interview and get scored feedback on depth, clarity and confidence.