Why new Architecture introduced in React Native

In 2022 React native team released the 0.68.0 version which has an opt-in react native new architecture. But why does react native need new architecture?

First, let's talk about the past (old architecture)

Before version 0.68 react native used "Bridge" which allows the native code and javascript to code each other.

The majority of the time everything runs smoothly but sometimes it gets traffic jams. Like when you have a big list of items and the user starts scrolling fast it gets blank space before the items show. You get the performance issue, Frame drooped. if you run the animation and calculation in the js thread and it takes too much time it becomes unresponsive and laggy because js is a single thread and bridge only handles asynchronous communication.

That's why the bridge is not future-proof. So react native team introduced new architecture which will not use the bridge, it uses JSI ( Javascript Interface).

The new architecture includes a native TurboModule system and fabric renderer(UI manager).

Fabric renders

Fabric is React native new renderer system made to "improve interoperability with host platform". With fabric, logic is rendered in C++. fabric renderer Is implemented in C++, and the C++ core shared is among platforms.

The new architecture uses a javascript interface from the engine, enabling the use of another javascript engine as Hermes.

Turbo Native modules(Way of creating native packages)

Turbo Native modules are the next version of Native Modules with extra features. The Turbo modules approach allows the js code to load each module only when it's really needed, and to hold a direct reference to it.

JSI

JSI is used in the javascript engine. JSI is the main piece of the new architecture. You can communicate javascript side without a bridge. You can directly call native or c++ code. Host Platform talked with C++ and its created a JS runtime. Provides an interface where you can register the c++ method to js runtime.