Skip to content
tezvyn:
Menu

React Native's Bridgeless Mode

Source: github.comMediumHow cards are made

Bridgeless Mode replaces React Native's legacy message queue with direct calls between JavaScript and native code. This improves performance by removing the serialization bottleneck for UI rendering and native module calls.

Why it exists

React Native's original architecture relied on a "bridge" to communicate between JavaScript and the native platform. This bridge was an asynchronous message queue. Every interaction, from rendering a view to calling a native function, had to be serialized, batched, sent across, and deserialized, creating performance bottlenecks and complex timing issues.

The mental model

Think of the old bridge as sending letters through a post office. You write a message (a JS call), put it in an envelope (serialize it), and send it off, waiting for a response later. Bridgeless Mode is like having a direct phone line to the native side. You can make a call and get an immediate, direct response without the overhead of batching and postage.

How it works

Bridgeless Mode is the culmination of the New Architecture effort. It completes the work started by two other pillars. First, TurboModules replaced legacy Native Modules, allowing JS to invoke native methods directly. Second, Fabric replaced the old UI manager, allowing React to render components on the native side more synchronously. Bridgeless Mode removes the final dependencies on the bridge, such as error handling and global event emitters, making the bridge fully obsolete.

When to use it

Enable Bridgeless Mode when migrating an app to the New Architecture to maximize performance and reliability. It is the intended future of React Native development. Adopting it is a necessary step to fully leverage the benefits of Fabric and TurboModules and to ensure your app is compatible with future React Native updates.

When not to use it

Avoid enabling Bridgeless Mode if your project relies on third-party libraries that have not been updated for the New Architecture. Since it requires an explicit migration of certain APIs, enabling it without a proper audit of your dependencies can lead to runtime errors. It is an opt-in feature precisely because it requires a conscious migration effort.

One canonical example

Previously, communication between JS and native was always asynchronous. A call like NativeModules.MyModule.doSomething() would send a message over the bridge, and the JS thread would continue without waiting. With Bridgeless Mode and TurboModules, the equivalent call can be invoked directly and synchronously, eliminating the queueing delay and serialization cost, which is critical for performance-sensitive operations.

Interview question

What fundamental change does Bridgeless Mode introduce to React Native's communication architecture?

  • a.It enables direct, synchronous calls between JavaScript and native code.Correct
  • b.It allows native UI components to be rendered entirely by JavaScript without a native UI manager.
  • c.It facilitates writing native modules entirely in JavaScript, removing the need for platform-specific implementations.
  • d.It optimizes the existing asynchronous message queue by improving serialization.
Why?

Bridgeless Mode replaces the legacy asynchronous message queue with a mechanism for direct, synchronous communication between JavaScript and native code, likened to a 'direct phone line.' Option D is incorrect because Bridgeless Mode removes the message queue, rather than optimizing it.

Just read this? Test yourself on what you have been reading.

Read the original → github.com

Put your scrolling time to good use

Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.

See open roles