React Native architecture (bridge, new architecture) - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the role of the Bridge in React Native architecture?

The Bridge connects JavaScript code with native platform code, allowing them to communicate asynchronously and exchange data.

intermediate

What problem does the new React Native architecture aim to solve?

It aims to improve performance and reduce communication overhead between JavaScript and native code by replacing the Bridge with a more direct and synchronous system.

intermediate

Name the three main parts of the new React Native architecture.

The three main parts are: Fabric (UI layer), TurboModules (native modules), and the JavaScript Interface (JSI) for direct communication.

advanced

How does Fabric improve UI rendering in React Native?

Fabric allows synchronous and fine-grained updates to the UI by integrating with the native rendering system directly, making UI updates faster and smoother.

advanced

What is the JavaScript Interface (JSI) in the new React Native architecture?

JSI is a lightweight interface that enables direct calls between JavaScript and native code without going through the Bridge, improving speed and reducing latency.

What does the Bridge in React Native do?

A Connects JavaScript and native code asynchronously

B Renders UI components directly

C Manages app navigation

D Handles network requests

The Bridge connects JavaScript and native code asynchronously to allow communication.

Which part of the new architecture handles UI rendering?

A TurboModules

B Fabric

C JSI

D Bridge

Fabric is the UI layer in the new React Native architecture.

What is a key benefit of the new React Native architecture over the old Bridge?

A Slower communication

B More asynchronous calls

C Direct and faster communication

D Less native code

The new architecture enables direct and faster communication between JavaScript and native code.

TurboModules in the new architecture are responsible for:

A Network requests

B UI rendering

C JavaScript parsing

D Native module management

TurboModules manage native modules with improved performance.

JSI stands for:

A JavaScript Interface

B JavaScript Integration

C JavaScript Interpreter

D JavaScript Injection

JSI means JavaScript Interface, enabling direct calls between JS and native code.

Explain how the Bridge works in React Native and why the new architecture replaces it.

Think about how communication speed affects app performance.

Describe the roles of Fabric, TurboModules, and JSI in the new React Native architecture.

Each part improves a specific area of the app.