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.
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.
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,
});
....
}It works with v0.63.2 or higher of RN. If not, please upgrade to the latest version. Of course, it works on Expo.
If you're using RN v0.66 or higher Once installed, react-native is automatically patched.
yarn add react-native-networking-patch --devIf you're using RN v0.63.x ~ v0.65.1, You must use the specific version below.
- RN v0.65.1
yarn add react-native-networking-patch@1.2.1 --dev- RN v0.65.0, RN v0.64.3
yarn add react-native-networking-patch@1.2.0 --dev- RN v0.64.2
yarn add react-native-networking-patch@1.1.8 --dev- RN v0.64.0
yarn add react-native-networking-patch@1.1.7 --dev- RN v0.63.x
yarn add react-native-networking-patch@1.1.6 --devprepare should be added to prevent this patch from being restored whenever packages are changed.
// package.json
{
...
"scripts": {
...,
"prepare": "yarn rn-networking-patch"
}
}If you were already using prepare, you can add the patch script later.
"prepare": "yarn jetify; yarn rn-networking-patch"You can execute the patch manually with the command below.
yarn rn-networking-patchJust delete the command you added to prepare and remove react-native-networking-patch package.