VocalHyre
Sign up

React Native · Mobile UI at native speed

Walk through the React Native architecture.

HardarchitecturefabricthreadsUpdated Oct 2026
Quiz this track

Short answer

React code runs on a JS thread, layout runs in Yoga, and native views live on the UI thread. The new architecture connects these with JSI, Fabric and TurboModules instead of the old asynchronous bridge.

A React Native app has several cooperating parts. The JS thread runs your React tree and business logic. The UI or main thread owns native views and must respond to touches and drawing. Yoga computes Flexbox layout. Native modules provide platform capabilities, and the renderer coordinates all of it.

Old architecture

  • The bridge serialises calls between JavaScript and native as batched JSON messages
  • Bridge calls are asynchronous, so they cannot return a value synchronously
  • High-frequency work such as gestures and animations can saturate the bridge and cause dropped frames
  • Modules are registered eagerly, which adds startup cost

New architecture

  • JSI is a C++ interface that lets JavaScript hold direct references to native host objects
  • Fabric is the new renderer and builds an immutable shadow tree with synchronous layout and measurement
  • TurboModules load lazily and expose typed interfaces with generated glue code
  • React 18 concurrent features can run on the JS side while the UI thread keeps rendering
text
JS thread -> React reconciliation -> Fabric shadow tree -> Yoga layout -> UI thread mount
                              |
                        JSI / TurboModules
                              |
                     Native platform APIs
A simplified view of the data path in the new architecture.

The architectural takeaway is that cross-thread work is the main source of jank. Keep animation and gesture work on the UI thread, keep the JS thread free of heavy synchronous work, and avoid chatty native calls in hot paths.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

  1. 1What problem did the bridge create?
  2. 2How does JSI differ from the bridge?
  3. 3What is the Fabric shadow tree?
  4. 4Why does the new architecture matter for startup time?

Say it in the interview

React Native separates JavaScript execution from the native UI thread, with Yoga handling layout. The old bridge passed batched JSON messages asynchronously, which made high-frequency native calls expensive. The new architecture replaces that with JSI for direct native references, Fabric for rendering and TurboModules for lazy typed modules. I design around that by keeping heavy work off the JS thread and putting gestures and animations on the UI thread where possible.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Related questions

HardHow did the legacy bridge work and what replaced it?HardWhat is React Native's new architecture?MediumWhat is Hermes and why does React Native use it?

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.

Start a free React Native interviewBrowse all questions