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

[karthikeyancontus]

Description

This issue is related to a previously closed ticket: #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 (#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:

1. 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

2. 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 }) => (
  <View>
    <Text>Screen One</Text>
    <Button title="Go to Screen Two" onPress={() => navigation.navigate('ScreenTwo')} />
  </View>
);

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

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

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="ScreenOne">
        <Stack.Screen name="ScreenOne" component={ScreenOne} />
        <Stack.Screen name="ScreenTwo" component={ScreenTwo} />
        <Stack.Screen name="ScreenThree" component={ScreenThree} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3. 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 }) => (
  <View>
    <Text>Screen One</Text>
    <Button title="Start Recursive API Call" onPress={makeApiCall} />
    <Button title="Go to Screen Two" onPress={() => navigation.navigate('ScreenTwo')} />
  </View>
);

4. Run the App:

5.Trigger the Recursive Function:

1. Navigate to "Screen One" and press the button labeled "Start Recursive API Call."
2. 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

Stacktrace or Logs

No logs are there

Reproducer

sorry not able provide this link

Screenshots and Videos

No response

[react-native-bot]

Warning

Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:

• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template
• Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.

[react-native-bot]

Warning

Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[react-native-bot]

Note

Not a bug report: This issue looks like a question. We are using GitHub issues exclusively to track bugs in React Native. GitHub may not be the ideal place to ask a question, but you can try asking over on Stack Overflow, or on Reactiflux.

[princektripathi]

Note

Not a bug report: This issue looks like a question. We are using GitHub issues exclusively to track bugs in React Native. GitHub may not be the ideal place to ask a question, but you can try asking over on Stack Overflow, or on Reactiflux.

@karthikeyancontus , you can leverage the aforementioned platforms for the resolution. Additionally, a refined idea can be proposed on the following link: https://github.com/react-native-community/discussions-and-proposals

[karthikeyancontus]

Note
Not a bug report: This issue looks like a question. We are using GitHub issues exclusively to track bugs in React Native. GitHub may not be the ideal place to ask a question, but you can try asking over on Stack Overflow, or on Reactiflux.

@karthikeyancontus , you can leverage the aforementioned platforms for the resolution. Additionally, a refined idea can be proposed on the following link: https://github.com/react-native-community/discussions-and-proposals

Thanks for the mention @princektripathi, let discuss about this feature there