Question 1

What is the traditional React Native architecture (The Bridge), and what performance bottlenecks are associated with it?

Accepted Answer

This is the legacy architecture; since React Native 0.76, the New Architecture has been the default, and newer releases are moving toward removing the old one entirely. It relied on a Bridge that asynchronously exchanged batched JSON messages between the JavaScript thread and the Native thread, creating a bottleneck when passing large amounts of data.

Question 2

What is the New Architecture in React Native, and what is the role of JSI (JavaScript Interface)?

Accepted Answer

JSI is a C++-written software layer that lets the JavaScript thread hold direct references to C++/Native objects and call their functions synchronously without JSON serialization or intermediaries.

Question 3

What is Fabric, and how does it differ from the old rendering system in React Native?

Accepted Answer

Fabric is the new C++-based renderer. It integrates directly with the React 18 Concurrency tree and provides synchronous UI element rendering and immediate integration with Yoga.

Question 4

What are TurboModules, and how do they improve application startup time?

Accepted Answer

They are the new native module system, which loads modules lazily on first use instead of initializing them all at application startup as before.

Question 5

What is the role of the Hermes engine, and why did it become the default in React Native?

Accepted Answer

It is an open-source JavaScript engine optimized specifically for mobile apps. It compiles code to bytecode ahead of time during the build, reducing startup time, bundle size, and memory usage.

Question 6

What are the main threads in a React Native app, and how is work distributed among them?

Accepted Answer

This describes the legacy architecture, replaced by the New Architecture as the default since 0.76. The app has three main threads: Main/UI Thread (screen rendering and touch), JS Thread (running logic and React code), and Shadow Thread (calculating element dimensions and positions with Yoga).

Question 7

What is Codegen in the new React Native architecture, and why is it required?

Accepted Answer

It is a tool that reads TypeScript/Flow type files and automatically generates matching C++, Java, and Swift/Objective-C code to ensure full type compatibility and prevent type errors between JS and Native.

Question 8

What is the difference between the bare React Native CLI workflow and the Expo Managed Workflow?

Accepted Answer

The bare workflow provides full access to and direct editing of the android and ios directories and native code, while Expo Managed hides the native directories and manages builds and updates through Prebuild and Config Plugins.

Question 9

How is the Yoga Layout library connected to the React Native rendering system?

Accepted Answer

Yoga is an open-source layout engine written in C++ that translates Flexbox properties into precise pixel coordinates (x, y, width, height) understood by iOS and Android.

Question 10

How do you handle AppState transitions (Active, Background, Inactive) and save power?

Accepted Answer

Use the AppState module to listen for transitions between the app being active in the foreground and moving to the background, then stop timers and expensive tracking to preserve battery life.