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. Because bridge communication is reduced, it's more efficient and improves overall app 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 v0.59.10 or higher of RN. 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.