igx-grid memory leak when users click pagination buttons

[jsakamotoIGJP]

Description

The igx-grid has a memory leaking problem. It happens when users click the paginator buttons.

• igniteui-angular version: 17.1.4
• browser: Microsoft Edge Version 122.0.2365.92 (Official Build) (64-bit)

Steps to reproduce

1. Open the browser's Dev Tools / Memory tab.
2. Take the 1st memory snapshot (don't forget to click the "Collect garbage" button before taking.)
3. Navigate to the page with an igx-grid component with a pagenator.
4. Click on the "next page" button of the pagenator.
5. Go back to the home page.
6. Take the 2nd memory snapshot (remember to click the "Collect garbage" button before taking it).
7. In the Dev Tools Memory tab, Choose "Comparison" in the "Perspective" dropdown and input "igx" into the "Class filter" text field.

2024-03-18_16h39_26.mp4

Result

You will see there are some objects with the name "igx" that were added but not deleted in the "Comparison" view of the Memory tab.

Expected result

The "Delta" column for all objects with the name "igx" should be zero in the "Comparison" view of the Memory tab.

Attachments

📦c-00235192-ng-app1-v17.1.4 (2).zip

[github-actions]

There has been no recent activity and this issue has been marked inactive.

[jsakamotoIGJP]

Hi @ChronosSF, thank you for reopening this ticket!

[github-actions]

There has been no recent activity and this issue has been marked inactive.

[MayaKirova]

@dkamburov @ChronosSF
Looking into this it seems like there are some detached nodes that get left on the page, such as the igx-grid node itself:

However that seems to be the case for any component where you have done any type of interaction (for example clicked on a button) and then destroy it.

I’ve modified the sample a bit here:
c-00235192-ng-app1-v17.1.4.2-modified.zip

I’ve added to the sample another page that loads a very simple component (app-component-test) with some text and a button, the button does nothing and the text is static. Still if you do the following:

1. Do a baseline mem. profile
2. Navigate to the new page (Go to test page 5)
3. Click on the button
4. Navigate back to home
5. Do another mem.profile and compare them.

You’ll notice that the component’s DOM (app-component-test) remains in memory:

You can also find the content of the component as detached nodes.

That seems to be similar to an issue logged in angular: angular/angular#56477
That has then been closed as an upstream issue in Chrome:
https://issues.chromium.org/issues/40056157
https://issues.chromium.org/issues/41466808

I don't think there's anything we can do on our side for this.

[ChronosSF]

Thank you for investigating this so thoroughly, @MayaKirova . I am closing this as a third-party-issue.