In this lesson, you’ll learn how React Native boosts performance by grouping multiple UI updates into a single "package" before sending them across the bridge.
The "Bridge Traffic" Problem
As we’ve learned, the JavaScript thread and the Native thread communicate via the bridge. Sending data across this bridge is a bit like shipping packages. If you send one tiny letter at a time, you spend all your time walking back and forth to the mailbox. If you wait a moment and send one large box containing twenty letters, you are much more efficient.
In React Native, if your code updates ten different components (like changing a text color, resizing an image, and hiding a button), it would be incredibly slow to send these as ten individual messages across the bridge. This would flood the bridge and cause "jank"—those moments where the UI feels frozen.
How Batching Works
To solve this, React Native uses batching. During every turn of the event loop, React Native collects all the UI changes requested by your JavaScript code. Instead of pushing them to the native side one by one, it bundles them into a single "batch."
Think of it like this:
// Imagine these happen in the same execution cycle:
button.setColor('blue');
text.setText('Hello!');
view.setOpacity(0.5);
// Instead of the bridge sending 3 separate messages,
// the engine creates a single batch:
[
{ id: 1, action: 'setColor', value: 'blue' },
{ id: 2, action: 'setText', value: 'Hello!' },
{ id: 3, action: 'setOpacity', value: 0.5 }
]
// This single batch crosses the bridge at once!
By waiting until the end of the current event loop iteration to "flush" these operations, React Native ensures the bridge stays clear and the Native thread doesn't get overwhelmed by a flood of tiny, separate tasks. It turns many small, expensive trips into one quick, efficient delivery. This is why your app stays smooth even when many updates happen at the exact same time.
Key Takeaway: Batching minimizes bridge congestion by grouping multiple UI updates into a single message, ensuring smooth performance by reducing the total number of trips across the asynchronous bridge.