Non-asset images, e.g. loaded remotely using uri, can cause memory not to be released when the Image component is unmounted

[alexfoxy]

Description

Images loaded from a remote location, or using an alternative loader, e.g. via the Photo Roll, can cause memory usage to increase rapidly. This isn't an issue with images loaded via the require method. This was first discovered when using an alternative (react-native-camera-roll) loader, but it's also an issue with images on the web, so in the core part of React Native. As far as I have seen this isn't an issue on the old architecture.

After a lot of digging into the image loading mechanisms it seems that ImageResponseObserverCoordinator class is retaining a pointer to the image data as a cache via imageData_ which causes the memory not to be released when the image his hidden. I could "fix" the issue by adding the following code.

I don't fully understand how the ImageResponseObserverCoordinator so I'm sure this isn't the ultimate way to fix the problem but I just wanted to highlight the issue and that it can be improved. Here's a comparison of the two runs with and without my "fix". You can also these runs live in the linked videos below.

With fix:

Without fix:

I am currently blocked from updating my app to use the new architecture because of this issue. I need to load quite a lot of high resolution images and since updating it very quickly runs out of memory.

Steps to reproduce

1. Pull repo: https://github.com/alexfoxy/ImageMemoryTest
2. Follow usual RN setup, yarn, pod etc and run the project
3. Press the "Use Remote Image" button to load an image from the web
4. Quickly show & hide the image using the buttons, you should notice memory increasing
5. Try the Asset Image for comparison which does not increase memory

React Native Version

0.79.2

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.1.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 161.08 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.13.0
    path: ~/.nvm/versions/node/v22.13.0/bin/node
  Yarn:
    version: 4.7.0
    path: ~/.nvm/versions/node/v22.13.0/bin/yarn
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v22.13.0/bin/npm
  Watchman:
    version: 2025.04.14.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.19072.14.2412.12360217
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 3.4.3
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: 18.0.0
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.2
    wanted: 0.79.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

n/a

MANDATORY Reproducer

https://github.com/alexfoxy/ImageMemoryTest

Screenshots and Videos

With fix: https://youtu.be/yAZ3FbNGbJs
Typical behaviour: https://youtu.be/ca2EiBO-C9I

[cipolleschi]

Thanks for the detailed issue and for the reproducer. I hope to find some time next week to investigate it further!

[migueldaipre]

Another reproducer can be found here.

[alexfoxy]

@cipolleschi hey sorry to pester but wondered if you had a rough timeline of when you'll be able to look into this? I'm happy to help but not very familiar with the ins-and-outs of how the React Native image caching system works.