react-native-networking-patch

What is this for?

React Native uses 6 event listeners to process networking events. For each request, these 6 listeners are registered and removed whenever processing. This is not the most effective approach. This patch makes RN's networking module work more efficiently.

# Performance Improvement

It improves performance using only one event for each request. When tested in my environments, there was about 20% improvement in performance.

The following bridge communications occur for each fetch request.

JS->N : Networking.addListener(["didSendNetworkData"])
JS->N : Networking.addListener(["didReceiveNetworkResponse"])
JS->N : Networking.addListener(["didReceiveNetworkData"])
JS->N : Networking.addListener(["didReceiveNetworkIncrementalData"])
JS->N : Networking.addListener(["didReceiveNetworkDataProgress"])
JS->N : Networking.addListener(["didCompleteNetworkResponse"])
JS->N : Networking.sendRequest([{"method":"GET","url":"...."....])
N->JS : <callback for Networking.sendRequest>([2])
N->JS : RCTDeviceEventEmitter.emit(["didReceiveNetworkResponse", ....])
N->JS : RCTDeviceEventEmitter.emit(["didReceiveNetworkData", ...])
N->JS : RCTDeviceEventEmitter.emit(["didCompleteNetworkResponse", ...])
JS->N : Networking.removeListeners([1])
JS->N : Networking.removeListeners([1])
JS->N : Networking.removeListeners([1])
JS->N : Networking.removeListeners([1])
JS->N : Networking.removeListeners([1])
JS->N : Networking.removeListeners([1])

The patched version looks like this.

JS->N : Networking.addListener(["events"])
JS->N : Networking.sendRequest([{"method":"GET","url":"...."....])
N->JS : <callback for Networking.sendRequest>([2])
N->JS : RCTDeviceEventEmitter.emit(["events", ....])
N->JS : RCTDeviceEventEmitter.emit(["events", ...])
N->JS : RCTDeviceEventEmitter.emit(["events", ...])
JS->N : Networking.removeListeners([1])

Other optimizations are also included.

# Global Timeout

fetch has no built-in timeout option. As you know, there are many workarounds such as using XMLHttpRequest API, AbortController and setTimeout + Promise. I want a simple and easy way. Now, you can set a global timeout without these workarounds.

// RN >= 0.62
import { Networking } from 'react-native';

// RN < 0.62
// import Networking from 'react-native/Libraries/Network/RCTNetworking';

// Setting default global timeout. You only need to set it once.
Networking.setTimeout(3000);

// After 3 seconds, a timeout exception is thrown.
async function getItem() {
  let item = null;

  try {
    const response = await fetch(....);
    item = await response.json();
  } catch (e) {
    console.error(e);
  }

  return item;
}

// `axios` works with a 10 second timeout, not 3 seconds.
async function getLongItem() {
  const instance = axios.create({
    baseURL: '...',
    timeout: 10000,
  });
  ....
}

Usage

Requirement

It works with the latest versions such as v0.62.2, v0.61.5 and v0.60.6. If not, please upgrade to the latest version. Of course, it works on Expo.

Install

Once installed, react-native is automatically patched.

yarn add react-native-networking-patch --dev

postinstall, postuninstall should be added to prevent this patch from being restored whenever packages are changed.

// package.json
{
  ...
  "scripts": {
    ...,
    "postinstall": "yarn rn-networking-patch",
    "postuninstall": "yarn rn-networking-patch"
  }
}

If you were already using postinstall, you can add the patch script later.

"postinstall": "yarn jetify; yarn rn-networking-patch"

Execute manually

You can execute the patch manually with the command below.

yarn rn-networking-patch

Uninstall

Just delete the command you added to postinstall, postuninstall and remove react-native-networking-patch package.