ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.02k stars 13.51k forks source link

bug: Memory leak on navigation after migrating to Ionic 7 #28891

Closed sebastiencrevier closed 8 months ago

sebastiencrevier commented 9 months ago

Prerequisites

Ionic Framework Version

v7.5.8 on React 17

Current Behavior

Navigating back and forth between pages causes the page content to be duplicated every time. This results in a massive memory leak and the navigation becomes unresponsive after just a few times. This makes our app completely unusable.

This happened after migrating from Ionic 6 to 7 and following the migration guide properly.

This is a simplified example: screen-capture.webm

This is what it really looks like with actual components. Look at the DOM Nodes and Heap size in the performance monitor, it keeps increasing and the app slows down more and more: screen-capture (1).webm

Expected Behavior

Navigation works properly like it did on version 6.

Steps to Reproduce

  1. Navigate to page A
  2. Navigate to page B
  3. Repeat steps 1-2 a few times

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (C:\Users\sebas\AppData\Local\npm-cache_npx\f6fddb685269761d\node_modules\@ionic\cli) Ionic Framework : @ionic/react 7.5.8

Capacitor:

Capacitor CLI : 4.6.1 @capacitor/android : not installed @capacitor/core : 4.7.1 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.7.2

System:

NodeJS : v20.10.0 (C:\Program Files\nodejs\node.exe) npm : 10.2.3 OS : Windows 10

Additional Information

No response

ionitron-bot[bot] commented 9 months ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

ionitron-bot[bot] commented 7 months ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.