jQuery UI Widgets Forums React Memory leak/unchecked DOM growth

This topic contains 2 replies, has 2 voices, and was last updated by  Hristo 2 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Memory leak/unchecked DOM growth #99254

    p2806
    Participant

    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

    • This topic was modified 2 years, 4 months ago by  p2806.
    Memory leak/unchecked DOM growth #99370

    p2806
    Participant

    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)

    • This reply was modified 2 years, 3 months ago by  p2806.
    Memory leak/unchecked DOM growth #99423

    Hristo
    Participant

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.