Feature Request: Support for Background Threads for Heavy JS Tasks in React Native

[karthikeyancontus]

Description
This issue is related to a previously closed ticket: facebook/react-native#19456. However, the problem persists and impacts the usability of React Native apps under specific scenarios.

When performing heavy recursive operations (such as recursive API calls) without delays, the JavaScript thread is blocked, causing the app to become unresponsive. The problem is exacerbated in applications using navigation libraries like @react-navigation/native, where smooth UI interactions are critical.

In the mentioned issue (facebook/react-native#19456), a bot automatically closed the ticket, but no satisfactory resolution or workaround was provided.

This problem remains relevant, as offloading such tasks to worker threads or alternative solutions is not natively supported by React Native, forcing developers to use third-party libraries or complex workarounds.

Request: Revisit this issue and provide a built-in mechanism or guidance to handle such cases efficiently.

Steps to reproduce
Install the latest React Native version:

Run the following commands to create a new React Native project:

• npx react-native init TestRecursiveBug
• cd TestRecursiveBug
• npm install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

Set up Navigation:
In App.js, set up the navigation container with 3-4 screens using @react-navigation/native and @react-navigation/native-stack.
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { View, Text, Button } from 'react-native';

const Stack = createNativeStackNavigator();

const ScreenOne = ({ navigation }) => (

Screen One
<Button title="Go to Screen Two" onPress={() => navigation.navigate('ScreenTwo')} />

);

const ScreenTwo = ({ navigation }) => (

Screen Two
<Button title="Go to Screen Three" onPress={() => navigation.navigate('ScreenThree')} />

);

const ScreenThree = ({ navigation }) => (

Screen Three
<Button title="Go to Screen One" onPress={() => navigation.navigate('ScreenOne')} />

);

export default function App() {
return (

<Stack.Navigator initialRouteName="ScreenOne">
<Stack.Screen name="ScreenOne" component={ScreenOne} />
<Stack.Screen name="ScreenTwo" component={ScreenTwo} />
<Stack.Screen name="ScreenThree" component={ScreenThree} />
</Stack.Navigator>

);
}
Implement a Recursive API Call:
const makeApiCall = async () => {
// Simulate an API call
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await response.json();
console.log('API Response:', data);

// Recursive call
makeApiCall();
};

const ScreenOne = ({ navigation }) => (

Screen One

<Button title="Go to Screen Two" onPress={() => navigation.navigate('ScreenTwo')} />

);
Run the App:
5.Trigger the Recursive Function:

Navigate to "Screen One" and press the button labeled "Start Recursive API Call."
Observe the performance of the app and any crashes or freezes due to the blocking recursive function.
React Native Version
"react-native": "0.72.10",

Affected Platforms
Runtime - Android, Runtime - iOS

Output of npx react-native info
System:
OS: macOS 14.6.1
CPU: (10) arm64 Apple M1 Pro
Memory: 124.86 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.16.0
path: ~/.nvm/versions/node/v18.16.0/bin/node
Yarn:
version: 1.22.19
path: ~/.nvm/versions/node/v18.16.0/bin/yarn
npm:
version: 9.5.1
path: ~/.nvm/versions/node/v18.16.0/bin/npm
Watchman:
version: 2024.12.02.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.4
- iOS 17.4
- macOS 14.4
- tvOS 17.4
- visionOS 1.1
- watchOS 10.4
Android SDK:
API Levels:
- "23"
- "25"
- "28"
- "29"
- "31"
- "33"
- "34"
- "35"
Build Tools:
- 30.0.2
- 30.0.3
- 31.0.0
- 33.0.0
- 33.0.1
- 33.0.2
- 34.0.0
- 35.0.0
System Images:
- android-28 | Google ARM64-V8a Play ARM 64 v8a
- android-29 | Google APIs ARM 64 v8a
- android-29 | Google Play ARM 64 v8a
- android-32 | Google APIs ARM 64 v8a
- android-33 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2023.2 AI-232.10300.40.2321.11668458
Xcode:
version: 15.3/15E204a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.10
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.10
wanted: 0.72.10
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false