Fetching api response too slow when debugging mode is off

[uonuon]

Description:
Good evening guys,
I am having an issue on my project on both android and iOS:

When i am using the app on debugging mode ON fetching data from api working pretty well, and getting the response just takes 2 seconds;
When i am using the app debugging mode OFF fetching data from api takes more than 11 seconds, i wonder why, and its first time face this issue.
I tried both Axios and Fetch both comes with the same results.
Have anyone faces this issue before?
Bonus: Postman and web-app getting response so fast like on debugging mode is ON

Code Example:

export const find = async (query: IFindQuery) => {
  const { apiServer } = getConfig();
  const queryString = stringify(query, {
    arrayFormat: 'brackets',
    encode: false,
  });
  const url = `${apiServer}/radiks/models/find?${queryString}`;
  const response = await fetch(url);
  return await response.json();
};

React Native version:

System:
OS: macOS 10.15.3
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 113.79 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.14.1 - /usr/local/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5522156
Xcode: 11.3/11C29 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5

Steps To Reproduce

1. Using the app while debugging mode ON
2. Using the app while debugging mode OFF

Expected Results

1. Api response takes 2 seconds
2. Api response takes 11 seconds

[uonuon]

During my testing checking the server requests, i found out that app add headers that slows the network requests.

Requesting when debugging mode on:

Headers: {
  host: domainUrl,
  connection: 'keep-alive',
  accept: '*/*',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-GB',
  cookie: 'io=5K1j7ryxBsl9G4lqAAAA',
  'sec-fetch-mode': 'cors',
  'sec-fetch-site': 'cross-site',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) ReactNativeDebugger/0.10.6 Chrome/78.0.3904.130 Electron/7.1.9 Safari/537.36',
  'if-none-match': 'W/"13f5-xomOLAdrnOBgz/HsCyFAQiZPvvU"'
}

Requesting when debugging mode off:

{
  host: domainUrl,
  'if-none-match': 'W/"5cd-dyACcrHbw5vCteYhfQGMQujOHAg"',
  accept: '*/*',
  'user-agent': 'pravica/1 CFNetwork/978.0.7 Darwin/19.3.0',
  'accept-language': 'en-us',
  'accept-encoding': 'br, gzip, deflate',
  connection: 'keep-alive'
}

The security model for XMLHttpRequest is different than on web as there is no concept of CORS in native apps.

[chrisglein]

Thanks for the issue. It'd really help if you could provide a minimal repro so we can determine if it's something React Native specific or something to do with the configuration of your app. It'd be great if you could provide a snack (or a pointer to a repo with full source).

[HectorLopez001]

Is there any updates about this issue? I am having pretty much a similar one: In my case, fetch calls only works as espected (about 0.5 sec) when react-native-debugger is activated and network inspect is enabled. If not running with this configuration, every fetch call spends about 5 secs.

It is also curious that the first fetch call actually works well and, moreover, if I wait 5 secs between calls, they work well too (if I wait 3 secs, then the API request lasts about 2 secs, if I wait 2 second, the API request last about 3 secs). It's like it is no posible completing 2 fetch calls in less than a certain amount of time, more specifically those 5 secs... It is always is the same amount of time.

This is so strange, any advice with this problem will be wellcome.

[manojeeva]

Same Here First API call takes around 11 seconds. Just a simple API call returns two string in a JSON as a response.
The second call takes 1 to 2 seconds.
Running Production App in android. What is causing this problem?

[rezasazesh]

I just upgraded to react native 0.63.2 and my app became extremely slow on android! I thought maybe there are UI elements that are causing this but now I can see that if i put my app on airplane mode everything works great! so the issue seems to be from Fetches

[virus2016]

We are experiencing the same issues. It's very sporadic - fetch is sometimes very slow or then its sometimes json()/text() functions. Very strange.

[liran]

same issues.

[Akhilbisht12]

Having a similar issue. Although the fetch API is working fine on the web. On the app, the first fetch takes way too much time.

[adarshsharma11]

Having a similar issue. Although the fetch API is working fine on the web. On the app, the first fetch takes way too much time.

Same issue in android real devices for first api with https & working good in emulator

[Hashymawan]

same issue

[kaganbuzcu]

Same issue.

[edwardchen]

Same issue. Android only.

[nguyenduy2392]

same issue only ios. not always, it sometime

[Akhilbisht12]

Posting this to help those who are having this problem. I was using PHP as my backend for the app. Changing to node.js backend helped me. Try Out. I don't know, what is causing this issue.

[williamlabanowski]

Try disabling hermes (set "enableHermes: false" in android/app/build.gradle). I had a similar issue and this fixed it (I'm on react-native 0.60.5). I think the Hermes js engine's handing of fetch requests isn't optimized or something. The reason why this issue would go away when remote debugging is off is because turning on remote debugging switches you to the debugger's (ie Chrome's) JS engine, so you stop using Hermes. If you're experiencing this issue on both iOS and Android, then this probably isn't the correct solution for you.

[quentincrinon]

Same issue, I've tried both Axios and fetch. On development mode my request takes 0.05s and on prod it takes more than 6s... Anyone has found a solution yet?

[victoriaSh]

Similar issue. Fetch requests, video and image loading from web takes too long both debug and production. Fetch takes less than 1 second on iOS but on Android it takes about 45-80 seconds. Checked timing - decoding json runs very quickly (~0.6s), web requests are extremely slow. Testing on real device. RN 0.63.3
Have no idea how to deal with it.

[victoriaSh]

Found a solution for my issue. Maybe it would be helpful for someone. Check IPv6 accessibility for the domain you trying to fetch from. https://ipv6-test.com/validate.php If web server is unreachable check your AAAA records, web server settings or ip6tables settings.

[mushroot]

Same issue, Only ios, But when I use mitmproxy work well.

[Nitesh-Kanyal]

same issue on android.

[m-jachym]

Same issue on Android
On react-native 63.3 about 8% of Android users were affected. On react-native 62.2 it's about 3%. I don't know if this is helpful information

[ashokkumar88]

@victoriaSh The ipv6 solution worked for you?

[victoriaSh]

@victoriaSh The ipv6 solution worked for you?

Yep! After setting up ipv6 for the domain that I'm using in fetch requests everything works fine.
Still don't get what exactly causes this behaviour. Guess there was a combination of 2 factors - my internet provider network settings + wrong IPv6 DNS settings for my domain.
Try to make requests through mobile network or another internet provider. If it works fast that's ipv6 settings problem.

[ashokkumar88]

@victoriaSh Thanks. The ipv6 solution is working for me also now.

[JasperH8g]

We're having the same issues using Firebase Cloud Functions (which has a valid IPv6 test).

[NickNish09]

Any news on this issue?
I'm having the same problem in react-native 0.64 using axios (or the fetch api) to call a domain which has ipv6.

The first fetch is always taking too slow, no matter what route. When I try to fetch from postman or the browser it is pretty fast. When I try to fetch other apis (such as https://reactnative.dev/movies.json) it is fast, only my project api is slow

I restarted my internet connection and it worked for a little bit, but now the problem is back.

[bijaykanshinew]

i am have same issue with fetch and axios

[ashokkumar88]

The issue was solved for me after switching to Cloudflare DNS.

[bijaykanshinew]

switching to cloudflare DNS didn't work for me. Still getting response after 1m or 2m
react-native version => 0.64

[NickNish09]

I don't know if this will help, but I restarted sometimes my internet router and the problem was resolved.

Not really sure why

[bijaykanshinew]

i did following

• Wrote android native module to make http call. but it was also taking time for the first time.
• Changed the region of aws ec2 to my nearest location. it reduced network latency by 3 times
• did some testing using axios with retry and timeout. observed that First http always take time to establish connection and then subsequent response time of http call was negligible.

conclusion - It's not react native specific issue . it's platform specific (Android or ios).

[guliash]

Yes. The problem seems not to be related to react native.

After adding this to method MainApplication#onCreate:

OkHttpClientProvider.setOkHttpClientFactory(() -> new OkHttpClient.Builder()
                .eventListenerFactory(new LoggingEventListener.Factory()) //This will log useful info in logcat (you can use Android Studio or ADB to see them)
                .cookieJar(new ReactCookieJarContainer())
                .build());

I saw in logs that 2021-09-09 15:48:15.200 2965-3136/? D/OkHttp: [5140 ms] dnsEnd.
So DNS resoving takes 5 seconds for the first requests. But after that everything runs fast.

Do not know what actually causes so long DNS resolving.

Related okhttp and retrofit issues which may help:
square/okhttp#6486
square/retrofit#1489
square/okhttp#506

[andreialecu]

Related:

#32730 (comment)

A workaround is to prioritise IPv4 over IPv6: #29608 (comment)

[JorgeOuyia]

In Android, if you use CTRL + M and go to Settings, you will see in Performance section that "JS Dev Mode" is active. Uncheck this setting and the application start running.

[tbhalke]

I'm using react-native 0.69.4 and Expo SDK 46, On Android when I try to make API calls for the first time it'll take longer time to get response after that it works fine. Working fine on iOS devices.

Any workarounds let me know.

[hadeskers]

Some android devices that don't have ipv6 connection will be delayed initiating network connection when connecting to ipv6 hosts, by updating to okhttp 5.x, overriding okhttp 4.x (which is currently supported use default in react native app - react native version 0.71) will solve this problem.

Add below dependencies to android/app/build.gradle to force use okhttp 5.0.0-alpha.11

dependencies {
    // others dependencies
  
    implementation 'com.squareup.okhttp3:logging-interceptor:5.0.0-alpha.11'
    implementation 'com.squareup.okhttp3:okhttp:5.0.0-alpha.11'
    implementation 'com.squareup.okhttp3:okhttp-urlconnection:5.0.0-alpha.11'
}

It works ok on android device missing ipv6 View more okttp version at: https://square.github.io/okhttp/changelogs/changelog/ or https://mvnrepository.com/artifact/com.squareup.okhttp3/okhttp

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions]

This issue was closed because the author hasn't provided the requested feedback after 7 days.