nhn / tui.grid

🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!
http://ui.toast.com/tui-grid/
MIT License
2.39k stars 385 forks source link

Memory leak when creating tables dynamically (destroy() does not clean up properly) #2048

Open argasta opened 1 week ago

argasta commented 1 week ago

Describe the bug When creating tables dynamically and destroying them with destroy() not all references are cleaned up properly which leads to memory leaks. The following objects still hold references to the grid and prevent the garbage collector to clean it up properly: recyclerComponents, observerInfoMap, instanceMap. Additionally there are also event listeners on el (mousedown, dblclick, click, mouseout, mouseover, touchstart, touchmove, touchend, contextmenu) and the document (mousedown, keydown) that are not removed and prevent the garbage collection.

To Reproduce In the zip file toast-ui-leak.zip is a working example written with vue3:

  1. npm install
  2. npm run dev
  3. in the app click the reload button multiple times (e.g. 10-20 times)
  4. See the heap snapshot which shows that the grid gets not garbage collected properly

Expected behavior When calling grid.destroy() there should be a proper clean up and the grid should be garbage collected

Screenshots image

Desktop (please complete the following information):