Memory Leak with latest React Native Integrated App on v0.74.2

[satheshrgs-rksv]

Description

Facing Memory Leak with React Native app integrated with existing native app.

I am currently on React Native 0.71.1 and tried to update to React Native 0.74.2.After upgrade facing memory leak. Memory usage keeps on increasing. With version 0.72 also there is no leak faced. But from version 0.73 facing memory leak.

Following this react native callstack brownfield architecture to load react native inside existing app as we have multiple entry points from native app to load react native in Fragment and also in Activity.

Steps to reproduce

1. Clone the repo - https://github.com/callstack/react-native-brownfield
2. Do yarn install
3. Try to open the example kotlin app
4. Open profiler from android studio
5. Perform Action like Click on Open React Native Button
6. Capture the Heapdump

React Native Version

0.74.2

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: macOS 14.5
  CPU: (10) arm64 Apple M1 Pro
  Memory: 125.97 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.20.1
    path: ~/.nvm/versions/node/v18.20.1/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v18.20.1/bin/yarn
  npm:
    version: 10.5.0
    path: ~/.nvm/versions/node/v18.20.1/bin/npm
  Watchman:
    version: 2024.05.06.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /Users/satheshrangasamy/.jenv/shims/javac
  Ruby:
    version: 2.7.4
    path: /Users/satheshrangasamy/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.2
    wanted: 0.74.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

Attached Memory Leak Profiler ScreenShot

Reproducer

https://github.com/satheshrgs-rksv/memoryleakreproducer

Screenshots and Videos

[satheshrgs-rksv]

@cortinico can you please look into this issue.

[AbhiGojoko]

Facing the same issue

[harsh-rksv]

We are facing the same issue since 0.73.0. do we have any solution to this?

[cortinico]

I am currently on React Native 0.71.1 and tried to update to React Native 0.74.2.After upgrade facing memory leak. Memory usage keeps on increasing. With version 0.72 also there is no leak faced. But from version 0.73 facing memory leak.

Can you try to update incrementally (first to 0.72 and then 0.73) and mention where you notice this regression?

[satheshrgs-rksv]

Facing this issue from 0.73 version. 72.x works fine

[Gogul-S]

Facing the same memory leak issue.

@cortinico This issue has been mentioned many times previously also. Kindly check this issue on priority. It is affecting all our integrated apps currently.

Previously raised issues:

#37105

[satheshrgs-rksv]

@cortinico

Here are some more finding from my side for the memory leak

I used this repo rn-diff-purge repo for taking android folders and followed the steps mentioned here in https://reactnative.dev/docs/integration-with-existing-apps for integration

Here's what I did in this repo - https://github.com/satheshrgs-rksv/memoryleakreproducer. Please use this as reproducer

1. created a folder and added index.js and package.json as mentioned in the official docs
2. copied the android folder from rn-diff-purge-repo
3. moved the existing MainApplication and MainActivity files to package bootstrapinbuilt
4. created a new package with the contents from react-native-brownfield
5. create a dummy landing page in native with two buttons, one will open the RN activity as mentioned in official docs and another will open based on brownfield approach

Following are some of the methods i tried

Method 1:
Directly launcing the RN app using the existing MainApplication and MainActivity from inbuilt rn-diff-app

Method 2:
Directly launching the RN app with the ReactNativeActivity created with reference from official docs

Method 3:
Create a screen in native, with a button and on click of that it will open the React Native activity created with reference from Official docs

Method 4:
Create a screen in native, with a button and on click of that it will open the React Native activity created with reference from Brownfield

Findings:
I have tried with RN version 0.71.1 and 0.74.3.
When I run profiler based with the above methods following are the findings

• Method 1: No leak in both RN versions
• Method 2: No leak in both RN versions
• Method 3: Multiple Leaks Seen when opening and closing the activity in both RN versions
• Method 4: With RN version 0.71.1, only one leak is seen, but with RN version 0.74.3 multiple leaks are seen

[satheshrgs-rksv]

Profiler Screenshots from version 0.71.1

Method 1

Method 2

Method 3

Method 4

[satheshrgs-rksv]

Profiler Screenshots from version 0.74.3

Method 1

Method 2

Method 3

Method 4

[satheshrgs-rksv]

The main thing which we need to figure out is why in the latest versions of react native with brownfield approach multiple leaks are seen

[satheshrgs-rksv]

Please see this comment from @fannnzhang

@cortinico Since we are nearing the android deadline for android 14 support and since ours is an integrated app running on 0.71.1, upgrading to latest versions of React Native is a must for this update. Could you please help with this as soon as possible