React Under the Hood #2: JSI, the C++ Layer, and the Leap into the Native World

1. The Concept of the Renderer: React's True Secret

React's architecture is divided into two main parts:

Reconciler: The core that asks the question "What changed?", housing the Virtual DOM and the Fiber engine.
Renderer: The unit that takes the changes found by the Reconciler and translates them into the language of the target platform.

In the web world, this renderer is the

typescript

react-dom

package, which translates changes into HTML elements (DOM nodes). In the mobile world, however, typescript
react-native
takes the stage.

When you write a

typescript

<View>

typescript

<Text>

component, React Native maps these components at runtime to

typescript

UIView

and

typescript

UITextView

objects for iOS, and to

typescript

ViewGroup

and

typescript

TextView

objects for Android. So, how is this communication achieved?

2. The Old Architecture and "The Bridge" Problem

Prior to 2022, a communication channel called The Bridge lay at the heart of React Native.

The JavaScript world (your code) and the Native world (the iOS/Android operating system) were like people living on two different islands who couldn't understand each other's language. To communicate, they had to exchange messages in JSON format.

A Metaphor: Sending a Telegram When a button is pressed on the JavaScript side, this action would be converted into a text-based JSON object (Serialization), sent across the bridge to the other island (Native), and there it would be parsed back (Deserialization) to be processed.

json

// An example Bridge message sent from JavaScript to the Native side in the old architecture
{
  "module": "UIManager",
  "method": "updateView",
  "args": [1234, "RCTView", { "backgroundColor": "red" }]
}