React Native freezes UI when fetching response from API

[samjayhk]

Description

Hello everyone, I think this problem has been around for a long time, during fetching the API response, React Native will freeze the UI, no matter if you press the back or other buttons, you will not get the response until the application gets any response from the API.

I have tried Redux-Saga, Redux-Thunk, Axios or the Javascript fetch()...they all cannot fix the problems, It seems that the fetch request occupied the main thread of React Native.

Some solutions I've tried are using a WebView to put the fetch request into the WebView, but it is stupid and cannot work around with fetch() request.

I think the problem is in the thread, all API requests should not occupy each other on the main thread of RN, so I am looking for some methods, try to put the request on a thread other than the main thread, I don't know if there is any similar solutions?

Thanks all!

Version

0.66.0

Output of npx react-native info

System: OS: macOS 11.5 CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz Memory: 507.04 MB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.18.1 - /usr/local/opt/node@14/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 6.14.15 - /usr/local/opt/node@14/bin/npm Watchman: 2021.10.11.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: Not Found IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7678000 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.66.0 => 0.66.0 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

1. Create a heavy API request by using Axios / fetch()

[martinezguillaume]

Same problem here, I was using redux toolkit, and now react-query, but the UI freeze during fetch call. It is more visible on old device, maybe that's the problem...

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[windsome]

@samjayhk , do you solve this problem? how to solve it?

[euthribeiro]

Is there any solution to be applied in order to solve this problem? I'm using axios with redux-saga and facing the same problem. It is more visible on old device as @martinezguillaume said. Please I need some help to fix it.

[euthribeiro]

Just to let you know I've tried to use fetch api but the problem still the same

[vietmobilefolk]

I'm facing the same problem recently, I found out this repo but need to test it: https://github.com/billmalarky/react-native-queue#installation Will update the result here.

[Dawood-Shahid]

@Vietvantue any updates about 'react-native-queue'? If you find any thing please let us know.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.