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

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

Clone the repo - https://github.com/callstack/react-native-brownfield
Do yarn install
Try to open the example kotlin app
Open profiler from android studio
Perform Action like Click on Open React Native Button
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

@cortinico

@cortinico can you please look into this issue.

Facing the same issue

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

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?

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

I faced issue Android memory leak in pure react-native (not integration app) when running foreground still not resolve serviceshttps://github.com//issues/45001

Same here

We have a hybrid app where we in our ApplicationController we are:

private fun initReactNative() {
        SoLoader.init(this, false)
        ApplicationLifecycleDispatcher.onApplicationCreate(this)
        reactNativeHost.reactInstanceManager.createReactContextInBackground()
    }

but then use a ReactActivity:

class RNFeedbackActivity : ReactActivity() {
    override fun getMainComponentName(): String {
        return "AppFeedback"
    }

    companion object {
        fun startActivity(context: Context) {
            val intent = Intent(context, RNFeedbackActivity::class.java)
                .addFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT)

            context.startActivity(intent)
        }
    }
}

we use that startActivity method to actually start everything.

We see this memory leak come up when we go in/out of that activity

@satheshrgs-rksv

@satheshrgs-rksv May I ask if you are using new arch? We are experiencing the same issue and we use new arch.

@yzhe554

@yzhe554 No, not using new arch

@cortinico

@cortinico Any update on this? I believe the issue blocks many brownfield projects.

@cortinico

@cortinico Any update on this? I believe the issue blocks many brownfield projects.

Nope there are no updates here. Once we have updates, we'll post them.

With version 0.72 also there is no leak faced. But from version 0.73 facing memory leak.

At this stage, the best you folks can do is keep on investigating where the leak is.
Mentioning that "multiple leaks" are happening is not really helpful for us to debug.
Any investigation now is more than welcome.

Also better reproducers would help (like simpler apps rather than https://github.com/callstack/react-native-brownfield)

@cortinico

@cortinico

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

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

Hi - I'm also working on a brownfield app and this memory leak has also impacted my app since upgrading to React Native 0.73.1. In my case, the problem is so severe that my app got flagged by Google Play for reaching the App Not Responding bad behavior threshold, which may impact the app's search results in the store.

I'd like to share my research results that hopefully can help those who are experiencing the problem.

TL;DR

Reverting this commit from the React Native source seems to resolve the memory leak issue but might have an impact on apps using ReactInstanceManager#recreateReactContextInBackground. Applying this fix may require Build from source.

MY FINDINGS

I created a minimal brownfield project in order to investigate the issue. The app has only two screens/activities:

An Android native screen (the main activity) with a button to navigate to a React screen. When the button is clicked, it callsActivity#startActivity to start a new activity with the embedded RN view.
The RN screen (another Activity) with only a simple Image component.

I tried two RN versions 0.72.17 and 0.75.3 and noticed some important things when entering and leaving the RN screen:

With RN 0.72.17, both functions createViewInstance (when entering the screen) and onDropViewInstance (when leaving the screen) are triggered for the Image component which is expected.
With RN 0.75.3, only createViewInstance is triggered when entering the screen. onDropViewInstance is not triggered when leaving the screen. This is clearly the sign of a memory leak.

Then I investigated the code changes between 0.72.17 and 0.73.0 and I found this commit that seems very likely be the cause of the leak. While the purpose of the commit is to clean up the views in the screen's root view, it somehow prevents the cleanup process of native components inside the screen from happening. So I tried reverting the changes in the commit and could see that the cleanup process happened as expected, onDropViewInstance was called, and the memory leak disappeared.

Since I don't understand the codebase well enough, it's hard for me to come up with a reasonable fix for the memory leak. While reverting the mentioned commit could resolve the issue, it would defeat the purpose of the commit.

I hope my research results help the React Native team more easily figure out and fix this problem. Feel free to tell me if there is anything more I can help with and I'm happy to have further discussion on this topic.

@tranhoangduong1994

@tranhoangduong1994 Thank you! I can also verify the issue is gone after patching a revert.

Update: I just profile this again with new arch, I can still see memory leaks but just less.

my issue still remain when running foreground service -> clear the app -> open app again MainActivity still leak

@cortinico

@cortinico Is #41678 related to this ?

@satheshrgs-rksv

Hi @satheshrgs-rksv , have you got this resolved?

Haven't tried updating yet

Although I am not using brownfield but react-native-navigation, I am getting more and more ANR reports after upgrading to 0.75, I suspect the root cause is similar.

Navigation Menu

Repository navigation

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

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of `npx react-native info`

Stacktrace or Logs

Reproducer

Screenshots and Videos

12 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of npx react-native info

Stacktrace or Logs

Reproducer

Screenshots and Videos

Activity

satheshrgs-rksv commented on Jun 30, 2024

AbhiGojoko commented on Jul 1, 2024

harsh-rksv commented on Jul 1, 2024

cortinico commented on Jul 1, 2024

satheshrgs-rksv commented on Jul 1, 2024

12 remaining items

chanphiromsok commented on Aug 19, 2024

samrombswm commented on Aug 19, 2024

boxman0617 commented on Aug 19, 2024

yzhe554 commented on Aug 23, 2024

satheshrgs-rksv commented on Aug 23, 2024

yzhe554 commented on Aug 23, 2024

cortinico commented on Aug 27, 2024

satheshrgs-rksv commented on Aug 27, 2024

tranhoangduong1994 commented on Sep 19, 2024

yzhe554 commented on Sep 20, 2024

chanphiromsok commented on Sep 20, 2024

satheshrgs-rksv commented on Nov 27, 2024

yzhe554 commented on Apr 16, 2025

satheshrgs-rksv commented on Apr 17, 2025

tarouboy commented on May 12, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx react-native info`