Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React Native freezes UI when fetching response from API

See original GitHub issue

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® Core™ 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

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

Issue Analytics

State:
Created 2 years ago
Reactions:18
Comments:7 (1 by maintainers)

Top GitHub Comments

5reactions

martinezguillaumecommented, Mar 7, 2022

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…

1reaction

euthribeirocommented, Oct 19, 2022

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

Top Results From Across the Web

React Native freezes UI when fetching response from API

I'm facing a weird problem on old devices with react native apps. I realized that it happens with all the apps that I...

React-native U.I Freezes and does not respond until you get ...

The problem is that you are calling async calls directly inside redux actions, which is not what redux was made to do.

React Native app freezes while fetching api - Reddit

Hi I have very common problem, react native application freezes while fetching API, It is like when you fetching you cannot click or...

How to prevent UI freeze when calling API with axios-Reactjs

Coding example for the question How to prevent UI freeze when calling API with ... to add dispatch(setIsFetchingTasks(false)) before return response.data; ?

Optimizing Performance - React

Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using ......