React Native – What does the new architecture solve?

new-architecture-of-react-native

They are both based on communication between JS & native side

What are the limitations of old architecture?

• It is asynchronous:
  The JavaScript side submits data to a bridge and waits for the data to be processed by the native side.
• It’s single-threaded, so it’s important not to overload the JS thread and execute animations on the UI thread.
• It adds additional overhead when it comes to the serialization of data from JSON objects.

What is an example of an old architecture limitation?

Rendering a lot of components in a long list:

• When the user scrolls fast, there will be a blank space caused by the communication between the JS and native sides being asynchronous.
• Essentially, we are having a “traffic jam” on our bridge with objects waiting to be serialized.

The same issue with the bridge being “overloaded” can be seen in native modules sending a lot of data back and forth.

What are the main components of new architecture?

Fabric

• This is a new concurrent rendering system
• It unifies render logic in C++ to better leverage interoperability between platforms
• Host Components like View, Text, etc. are now lazily initialized, resulting in faster startups

TurboModules

This is a new way of writing native modules that also leverages the power of JSI, allowing for synchronous and an order of magnitude faster data transfer from native to JS and vice versa.