igniteui-angular icon indicating copy to clipboard operation
igniteui-angular copied to clipboard

IgxGrid: memory leak

Open ddaribo opened this issue 3 years ago • 4 comments

Description

IgxGrid instances do not seem to get properly garbage collected.

  • igniteui-angular version: 14.0.x
  • browser: tested in Chrome

Steps to reproduce

  1. Open this sample
  2. Click on the 'toggle' button
  3. Open Chrome Dev Tools -> Memory tab -> Take heap snapshot
  4. Filter the snapshot by "IgxGrid.."

Result

An instance of the IgxGridComponent remains. Toggling multiple times and taking another snapshot shows as many instances stored as the times toggled.

Expected result

The IgxGridComponent to be garbage collected.

Attachments

image

ddaribo avatar Jul 04 '22 14:07 ddaribo

Any news on this issue?

wizgob avatar Jul 18 '22 08:07 wizgob

This is a side effect of how ngIf handles destroying the content under the hood. It actually tries to be smart about it to be able to recreate it more quickly which leads to perpetual left-overs. This happens with any content inside really, it's not igxGrid-specific.

Check the sample I am attaching. I replaced igxGrid with a very simple Material table. There is still a reproducible leak, albeit smaller (mostly due to Material table being a simpler grid implementation with a lot less code than igxGrid). To help make it more noticeable I added a button to start/stop a toggle loop. igx-grid-memory-leak-14.zip

ChronosSF avatar Aug 04 '22 16:08 ChronosSF

I reviewed your sample and it does not shows a leak

When the table is visible I get an instance after taking a heap snapshot in chrome developer tools.

image

When the table is hidden (ngIf with false condition), I do not get an instance of MatTable, demonstrating there is no leak

image

wizgob avatar Sep 06 '22 13:09 wizgob

Here is a new sample that does not use *ngIf : I used the angular router to add and remove the igx-grid component: https://github.com/wizgob/igx-grid-leak-2

Reproduction steps (in google chrome)

  • run ng serve on the project above and load it in chrome
  • Click on 'grid' link : igx-grid i showed
  • Click on 'home' link : igx-grid is hidden
  • Open chrome developer tools, go to 'Memory' tab, take a heap snapshot

Expected behaviour: No instance of IgxGridComponent is found in heap snapshot

Actual behaviour: An instance of IgxGridComponent is found in heap snapshot : there is a memory leak. Each 'home'/'grid'/'home' cycle results in another instance being leaked.

image

wizgob avatar Sep 07 '22 08:09 wizgob

Any news on this problem?

wizgob avatar Oct 14 '22 08:10 wizgob

We'll be assigning it for further investigation most likely very early in November, after the current cycle of development is complete.

Generally speaking, Angular makes memory leak hunting a lot harder as it has quite a lot going on under the hood that's essentially blackbox . In many ways Angular routing is not that much different from how ngIf functions so it may have the same drawbacks as well. But we'll surely investigate it to be certain. I can just say that the last time we had a suspected memory leak in a different component it turned out to be ngIf's doing and during my initial research I did go over a list of suspicious (I use the term loosely as they were only suspicious if you expect Angular to cheat in some way) event handlers (those are almost always the culprit for GC to not do its thing) and swapping them with double and tripple safeguards did little to change the result.

ChronosSF avatar Oct 14 '22 10:10 ChronosSF

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

github-actions[bot] avatar Dec 14 '22 00:12 github-actions[bot]