React Native architecture (bridge, new architecture) - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the role of the React Native Bridge?

In React Native's classic architecture, what does the Bridge do?

A It manages the app's navigation stack and screen transitions automatically.

B It allows JavaScript and native code to communicate asynchronously by sending serialized messages.

C It compiles JavaScript code directly into native machine code for faster execution.

D It handles styling and layout calculations on the native side only.

💡 Hint

Think about how JavaScript talks to native modules in React Native.

The Bridge in React Native is a communication layer that sends serialized JSON messages asynchronously between JavaScript and native code, enabling them to work together.

❓ ui_behavior

intermediate

How does the new React Native architecture improve UI updates?

Compared to the classic Bridge, how does the new React Native architecture handle UI updates more efficiently?

A It uses a synchronous bridge that blocks JavaScript until UI updates finish.

B It uses a JavaScript-driven UI thread that directly manipulates native views without serialization.

C It removes the need for JavaScript by writing UI entirely in native code.

D It introduces a Fabric renderer that allows concurrent and asynchronous UI updates with fine-grained control.

💡 Hint

Think about how the new Fabric renderer changes UI rendering.

The new Fabric renderer in React Native's architecture enables asynchronous, concurrent UI updates by coordinating JavaScript and native threads more efficiently, improving performance and responsiveness.

❓ lifecycle

advanced

What lifecycle change occurs with TurboModules in the new React Native architecture?

TurboModules replace classic native modules. How does their lifecycle differ in the new architecture?

A TurboModules run on the UI thread instead of the native module thread.

B TurboModules are eagerly initialized at app launch, increasing memory usage.

C TurboModules are lazily initialized only when first used, reducing startup time.

D TurboModules require manual memory management unlike classic modules.

💡 Hint

Consider how startup performance is improved in the new system.

TurboModules are designed to be lazily loaded only when needed, which helps reduce app startup time and memory consumption compared to classic native modules that initialize eagerly.

❓ navigation

advanced

How does the new React Native architecture affect navigation libraries?

With the new architecture, what is a key consideration for React Native navigation libraries?

A They must be rewritten to use TurboModules and Fabric to avoid the Bridge.

B They no longer need to interact with native code at all.

C They can only use JavaScript-based navigation without native integration.

D They must use synchronous Bridge calls for screen transitions.

💡 Hint

Think about how native modules and UI rendering changed.

Navigation libraries need to adapt to the new architecture by using TurboModules and Fabric to communicate efficiently with native code and render UI, avoiding the old Bridge bottleneck.

🔧 Debug

expert

Why might a React Native app freeze under the classic Bridge but not with the new architecture?

A React Native app using the classic Bridge sometimes freezes during heavy UI updates. Why does this happen less in the new architecture?

A The classic Bridge is single-threaded and serializes all messages, causing blocking; the new architecture uses concurrent threads and asynchronous rendering.

B The classic Bridge uses too many native threads causing deadlocks; the new architecture uses only one thread.

C The classic Bridge compiles JavaScript slower; the new architecture uses a faster JavaScript engine.

D The classic Bridge requires manual memory management; the new architecture uses automatic garbage collection.

💡 Hint

Consider how message passing and threading differ between architectures.

The classic Bridge serializes communication on a single thread, which can block UI updates and cause freezes. The new architecture uses concurrent threads and asynchronous rendering to avoid blocking and improve responsiveness.