React Native freezes UI when fetching response from API

[euthribeiro]

Description

I'm facing a weird problem on old devices with react native apps. I realized that it happens with all the apps that I had developed with RN. Every time that I do a request to API the UI freezes until the request is responded. I have published 5 apps on Google Play store when the problem is the same. I don't know what to do. I need some help to solve it. Even the most recent version of RN (0.70.3) I'm getting this problem. Just to let you know I'm using axios with redux saga and I tried to use just fetch API but the problem still the same.

Version

0.70.3

Output of npx react-native info

System: OS: Windows 10 10.0.22000 CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11390H @ 3.40GHz Memory: 6.72 GB / 15.74 GB Binaries: Node: 16.17.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: API Levels: 23, 28, 29, 30, 31, 32 Build Tools: 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0 System Images: android-26 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom Android NDK: Not Found Windows SDK: Not Found IDEs: Android Studio: AI-213.7172.25.2113.9014738 Visual Studio: 17.3.32819.101 (Visual Studio Enterprise 2022) Languages: Java: 18.0.1.1 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.3 => 0.70.3 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Nothing

Snack, code example, screenshot, or link to a repository

Nothing

[cavanierc]

I have the same issue on iOS application.

Output of npx react-native info: System: OS: macOS 12.6 CPU: (8) arm64 Apple M1 Pro Memory: 114.89 MB / 32.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.18.0 - /opt/homebrew/opt/node@16/bin/node Yarn: Not Found npm: 8.19.2 - /opt/homebrew/opt/node@16/bin/npm Watchman: Not Found Managers: CocoaPods: 1.11.3 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0 Android SDK: API Levels: 30, 31 Build Tools: 30.0.2, 30.0.3, 31.0.0 System Images: android-30 | Google APIs ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: Not Found Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild Languages: Java: 11.0.16.1 - /usr/bin/javac npmPackages: @react-native-community/cli: ^9.2.1 => 9.2.1 react: 18.1.0 => 18.1.0 react-native: 0.70.3 => 0.70.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

[Ralisson-Mattias]

Same problem

[H4mxa]

Facing same issue

[haveamission]

Same issue for me. Been trying to fix it with all sorts of async code, and any number of other fixes. No luck.

[developer3441]

Same Issue. Has anyone found any solution?

[MrSquaare]

We managed to resolve the issue by using JavaScriptCore instead of Hermes (since react-native 0.70+ uses Hermes engine by default), see how to switch back to JSC here: https://reactnative.dev/docs/hermes#switching-back-to-javascriptcore

[MrSquaare]

Also, this issue could be related to https://github.com/facebook/react-native/issues/32867

[migueldaipre]

Can anyone from the Meta team help here?

We are facing the same issue with Hermes enabled

cc @cortinico @fortmarek @kelset

[cortinico]

Can anyone from the Meta team help here?

Can we get a reproducer of some sort?

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[github-actions[bot]]

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

[migueldaipre]

We are no longer having this issue in 0.71+

[github-actions[bot]]

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[bot]]

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

[zhangsl1987]

any solutions?

[austinhutchison]

What I realized is that it is not the request that freezes the UI, it is the promise of parsing of the response that needs to resolve before the main thread is unblocked. If you're using Apollo, this happens by default, if you're using fetch then it is either .text() or .json().

My solution was to use rn-fetch-blob and save the response as a file and parse from there.