Memory leak/unchecked DOM growth

[p2806Participant]

I am working on an app whose memory continually goes up and never reduces. I’m not sure if this is the only problem in this app, but I have found one serious problem with JQWidgets in our React environment.

We use react-router-dom[1] to provide multiple “pages” inside the app. When switching between “pages”, I noticed that certain JQWidgets widgets are adding things to the DOM *every time* I go to the “page” yet they are never removing those elements.

One such item was a JqxMenu. I noticed that I was unable to work with the elements in the menu by calling docuemnt.getElementById() because it turned out that the JqxMenu was adding the menu more than once, and of course, you should never have nodes in the DOM with the same ID.

I also see a LOT of jqxtooltip items, which we are using for buttons in the toolbar of our JqxDataTables. Another is many items with names such as: listBoxjqxWidget74b6e564fc44.

I tested removing them by adding this code to each “page” component:

componentWillMount()
{
  window.$('.jqx-menu-wrapper').remove();
  window.$('.jqx-tooltip').remove();
  window.$('[id^="listBoxjqxWidget"]').remove();
}

This works to clean up the DOM, but unfortunately in the case of the tooltips, it seems as though the original items added to the DOM are the ones that are needed, because mousing over buttons in our data table toolbar causes errors. So I had to back out the second line above and now our app has an endless number of jqxtooltip items being added to the DOM that do nothing except cause memory leaking.

[1]https://github.com/ReactTraining/react-router

[p2806Participant]

A little more information – I suspect this has to do with how things like tooltips are built. The method we use for doing so comes straight from your examples on pages such as

https://www.jqwidgets.com/reactjs-components-documentation/documentation/jqxdatatable/reactjs-datatable-getting-started.htm

E.g., the toolbar with buttons and tooltips seems to be built and re-built every time the component is rendered (snippet from an example on the page linked above):

    let renderToolbar = (toolBar) =>
    {
        let toTheme =  (className) => {
            if (theme == "") return className;
            return className + " " + className + "-" + theme;
        }
        // appends buttons to the status bar.
        let container = $("<div style='overflow: hidden; position: relative; height: 100%; width: 100%;'></div>");
        let buttonTemplate = "<div style='float: left; padding: 3px; margin: 2px;'><div style='margin: 4px; width: 16px; height: 16px;'></div></div>";
        let addButton = $(buttonTemplate);
        let editButton = $(buttonTemplate);
        let deleteButton = $(buttonTemplate);
        let cancelButton = $(buttonTemplate);
        let updateButton = $(buttonTemplate);
        container.append(addButton);
        container.append(editButton);
        container.append(deleteButton);
        container.append(cancelButton);
        container.append(updateButton);
        toolBar.append(container);
        addButton.jqxButton({cursor: "pointer", enableDefault: false,  height: 25, width: 25 });
        addButton.find('div:first').addClass(toTheme('jqx-icon-plus'));
        addButton.jqxTooltip({ position: 'bottom', content: "Add"});
        editButton.jqxButton({ cursor: "pointer", disabled: true, enableDefault: false,  height: 25, width: 25 });

That said, the JqxMenu that was exhibiting the same problem is just a normal <JqxMenu> tag in our JSX, so the problem seems like it could be fairly fundamental? (and don’t forget the listBoxjqxWidget elements which I suppose come from things like JqxComboBox)

[HristoParticipant]

Hello p2806,

Could you provide us more details? It will be better if you could provide us an example that demonstrates this with a few dummy records?
I would like to suggest you if you use some additional re-renderings and in some way, they are recreated to use they destroy methods.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts