Built‑in fetch vs custom native module: does concurrency increase latency in React Native?

Question

Goal: determine if React Native's built‑in fetch API introduces higher latency when multiple requests are issued concurrently compared to a custom native networking module.
Constraints include platform‑specific connection limits per host, potential variations in JavaScript engine event‑loop behavior, and the fact that responses are handed to the JavaScript thread for sequential processing, which may serialize handling and affect perceived latency.
Key questions:
Does the built‑in fetch stack throttle concurrent connections and cause increased per‑request latency relative to a custom native module?How does the nondeterministic order of promise resolution impact UI updates when many responses arrive simultaneously?What measurable latency improvement can be achieved by offloading network handling to a native module on a separate thread?

Siddharth · Answer

Does concurrency increase latency in built-in fetch?
Yes, but the latency increase typically occurs at the JavaScript bridge rather than the networking layer. While the built-in fetch API leverages high-performance native stacks (OkHttp on Android and NSURLSession on iOS) that handle concurrent connections efficiently at the OS level, the bottleneck arises when those concurrent responses return.

The Bridge Bottleneck vs. Network Throttling
It is important to distinguish between network-level concurrency and thread-level serialization:

Network Layer: Both fetch and custom native modules are subject to platform-specific connection limits per host. If you exceed these limits, requests will queue regardless of the implementation.
JS Thread: In React Native, all fetch responses must be serialized and passed across the bridge to the single JavaScript thread. When many requests resolve simultaneously, the JS event loop must process these responses sequentially. If one response handler performs heavy computation, it creates "head-of-line blocking," increasing the perceived latency for all other pending resolutions.

Custom Native Modules: Potential Gains
A custom native module can reduce latency by offloading data processing. Instead of sending raw, large JSON payloads across the bridge for JS to parse, a native module can:

Perform network requests on a background native thread.
Filter, aggregate, or transform the data natively.
Send only the final, minimized result back to the JavaScript thread.

This reduces the volume of data crossing the bridge and minimizes the time the JS thread spends in the serialization/deserialization phase.

Verification Steps
To determine if the bridge is your actual bottleneck, perform the following tests:

Proxy Analysis: Use a tool like Charles Proxy or Fiddler. Compare the timestamp of the First Byte Received (native layer) with the timestamp of the Promise Resolution (JS layer). A widening gap during concurrent loads indicates a bridge bottleneck.
Payload Scaling: Increase the size of the response bodies. If latency increases linearly with data volume despite constant network speeds, the bridge is the limiting factor.

Diagnostic Requirement
To provide a more specific recommendation, please specify: Are your concurrent requests returning small metadata objects or large JSON payloads? (Large payloads significantly favor custom native modules for pre-processing).

Built‑in fetch vs custom native module: does concurrency increase latency in React Native?

1 answer

Does concurrency increase latency in built-in fetch?

The Bridge Bottleneck vs. Network Throttling

Custom Native Modules: Potential Gains

Verification Steps

Diagnostic Requirement

Your perspective belongs here.

0 question comments