Memory Leak with Fetch

[clemensmol]

Description

I have encountered a memory leak issue when using the fetch function in my React Native application. The memory usage gradually increases over time in iOS, leading to performance degradation and potential crashes.

React Native Version

0.72.4

Output of npx react-native info

  OS: macOS 13.5
  CPU: (10) arm64 Apple M1 Pro
  Memory: 758.45 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: /opt/homebrew/bin/yarn
  npm:
    version: 9.5.1
    path: ~/.nvm/versions/node/v18.16.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.12.1
    path: /Users/clemens/.rvm/gems/ruby-2.7.5/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10406996
  Xcode:
    version: 14.3.1/14E300c
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.19
    path: /usr/bin/javac
  Ruby:
    version: 2.7.5
    path: /Users/clemens/.rvm/rubies/ruby-2.7.5/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.4
    wanted: 0.72.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Steps to reproduce

1.  Create a React Native project with the necessary dependencies.
2.  Implement a screen or component that utilizes the fetch function to make API requests.
3.  Monitor the memory usage of the application over an extended period.
4.  Observe that the memory usage consistently increases during and after making multiple fetch requests.

Snack, screenshot, or link to a repository

minimal example: https://github.com/clemensmol/rn-fetch-memoryleak

[Arjan-Zuidema]

This also happens on Android, but not as bad as on iOS it seems

The first pink is a press on the start button (in the repro app) and the second pink dot is a press on the stop button. Notice how memory only increases between start and stop

[Vadko]

any updates on this? still a valid issue in 0.72.5

[domeknn]

+1 0.72.4 also

[Vadko]

it seems to be related to the hermes, using demo provided above in 0.69 is not leading to memory leak, but if hermes is turned on, on same 0.69 issue is back

[domeknn]

There's an update from Hermes team that bug occurs in RN code: https://github.com/facebook/hermes/issues/1147#issuecomment-1756478479

[lucaswitch]

Any fix for this issue?

[ArsenyYankovsky]

Easily reproducible on the 0.73.2 as well doing something like this in a loop with big video files:

    const formData = new FormData()

    formData.append('video', {
      uri: partFileUrl.replace('file://', ''),
      type: 'video/quicktime',
      name: `${partNumber}.mov`,
    })

    const response = await fetch('https://example.com/upload', {
      method: 'POST',
      body: formData,
    })

I have also tried switching to JSC from Hermes or calling gc, both didn't help.