editor.load possibly causes memory leak

[varadero]

How to reproduce:

• Naviagate to https://grapesjs.com/demo.html
• Open browser console (Chrome) and type the following: setInterval(() => editor.load(), 1000) and press Enter
• Go to "Memory" tab (Chrome) and look at the memory usage

What happens: The memory is constantly increasing. If you open Chrome's "Performance monitor" you can also see "DOM nodes" and "JS event listeners" constantly increasing. After about 3 minutes "JS Heap size" increases from 24MB to 1000MB, "JS event listeners" increases from about 1600 to 50000+, "DOM nodes" from 8600 to 100000+. After some time the browser tab will crash because of the high memory consumption.

The same happens also if you have very simple grapesjs project and place a single block in the canvas and start in an interval a call to editor.load().

[varadero]

This is important. If not fixed, it makes GrapesJS dangerous to use especially in SPA applications.

[artf]

I'll check it out, but any help is welcome

[diazemiliano]

I'm having the same issue here. Even after destroy the editor, the issue remains.

[Nelida27]

Hello @varadero @artf , Any update about this issue, since I have the same problem.

[artf]

Not really, I've refactored a lot of modules since this issue by taking into account the memory leak problem but was not really focused on inspecting each module so, I guess the issue is still here. I'm closing this one in favor of #1470, probably I'll be back on this issue soon and will report any possible update there.

[samehdoush]

I'm having the same issue here. Even after destroy the editor, the issue remains.

[zhixXiang]

I'm having the same issue here. Everytime load increase the memory

[zhixXiang]

@artf I use below code on server side let editor: Editor | null = grapesjs.init({ headless: true }); editor.loadProjectData(myJson);

this cause memory leak Everytime loadProjectData increase the memory, my server out of memory soon.