[BUG] Memory leak

[MasoudKh87-git]

Hi Andrew,

When I use this component with big data, the program slows down due to memory leaks

[avallete]

Hi,

This issue will be hard to investigate without more details/examples to reproduce.

If you can provide a MWE I'll be able to investigate further on this issue.

[MasoudKh87-git]

I have 29,000 records. For the first time it’s rendering for 29,000 times and shows the records perfectly. BUT when I use the arrow keys to go up/down in the list, it renders the whole list again which causes a considerable slow movement in the list. I think it is not destroying the listeners and nodes which is already created, therefore memory leaks occur.

[avallete]

The items list elements are removed from the DOM at each call to update and I don't see where references could be kept preventing the garbage collection. I will investigate more on it.

However, the slow down could not even be due to leaks but to the way events and rendering itself is handled

https://github.com/avallete/ag-grid-autocomplete-editor/blob/14a7ff5ddbfa4a11cf3cee69d4e10a16b980c731/autocompleter/autocomplete.ts#L198

which remove and re-render all elements at every call to update(). This part of the code could surely use some optimization to play more nicely with huge amount of data.

I never used it nor designed it to handle this amount of data locally. I usually leverage the fetch api and some request filtering (limit/pagination) to move the processing load from client to server.

What could be done:

• Add some "big workload" tests with data-gen tools (eg: faker) to time the behavior on (1k, 5k, 10k, 20k, 30k+) entries.
• Search for memory leaks
• The rendering part probably also need to be refactored into a less naive approach

[MasoudKh87-git]

Hi, Thanks for your comment, that's right and I handled this issue with limiting the list after fetch. But as you can see in memory leak snapshot nodes(green line) and listeners(orange line) are not destroying after disposing the component!