JS event listeners heap

[BoJIbFbI4]

Hi, we r using this table to provide "real-time" status for the chargers.
Data is presented in a tree-like way.
We have a dummy pulling every 1sec to bring the new state.
We have some customization for the table.

To bring some performance we did:

• Stop pulling while the tab is "blurred"
• Some kind of semaphore, to wait and not to DDoS server.

So the problem is - once u leave(go to another one) the tab and back after ~1,5-2h - the CPU load jumps to 100%, memory to the maximum ~4Gb, and JS event listeners to the ~40000 and the app is crashed (obviously).

The main problem - we cannot really debug it, cannot do the profiling etc...

The part of the code itself:

  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});


const columns = useMemo<MRT_ColumnDef<TreeNode>[]>(() => tableColumns(showSidePanelHandler, t), [showSidePanelHandler, t]);
  const icons = useMemo(() => customIcons(t), [t]);
  const data = useMemo(() => transformedData, [transformedData]);
  const table = useMaterialReactTable({
    ...DEFAULT_SC_TABLE_PROPS,
    columns,
    data, // data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
    icons,
    onRowSelectionChange: setRowSelection,
    muiTableBodyRowProps: ({ table, row }) => {
      const { density } = table.getState();
      return {
        sx: tableBodyRowStyles(density),
        selected: rowSelection[row.id],
      };
    },
    state: {
      showSkeletons: isLoading,
      rowSelection,
    },
  });
...
export const customIcons = (t: TFunction<'translation', undefined>): Partial<MRT_Icons> => ({
  SearchIcon: () => (
    <DzTooltip title={t('tooltipText.showHideSearch')}>
      <SearchIcon width={25} height={24} />
    </DzTooltip>
  ),
  ViewColumnIcon: () => (
    <DzTooltip title={t('tooltipText.showHideColumns')}>
      <ViewColumnIcon />
    </DzTooltip>
  ),
  FullscreenIcon: () => (
    <DzTooltip title={t('tooltipText.fullscreen')}>
      <FullScreenIcon />
    </DzTooltip>
  ),
  SearchOffIcon: () => (
    <DzTooltip title={t('tooltipText.showHideSearch')}>
      <SearchOffIcon width={25} height={24} />
    </DzTooltip>
  ),
  FullscreenExitIcon: () => (
    <DzTooltip title={t('tooltipText.exitFullscreen')}>
      <ExitFullScreenIcon width={25} height={24} />
    </DzTooltip>
  ),
});
...

export const DEFAULT_SC_TABLE_PROPS: Partial<MRT_TableOptions<TreeNode>> = {
  enableGrouping: true,
  enablePagination: false,
  muiTableContainerProps,
  muiTopToolbarProps,
  enableColumnDragging: false,
  enableDensityToggle: false,
  enableColumnFilters: false,
  enableSorting: false,
  enableColumnActions: false,
  globalFilterFn: '', // for global search not to filter data but just highlight the matches.
  muiTableHeadProps: { sx: { position: 'sticky', top: 0 } },
  enableStickyHeader: true,
  defaultColumn: {
    minSize: 50,
    maxSize: 9001,
    size: 120,
  },
  muiTableBodyCellProps: { sx: tableBodyCellStyles },
  positionToolbarAlertBanner: 'none',
  initialState: {
    density: 'compact',
    showColumnFilters: false,
    showGlobalFilter: false,
    columnPinning: { left: ['name'] },
    expanded: true,
  },
  localization: noLocalizationObj,
  mrtTheme: {
    matchHighlightColor: changeBrandingColorOpacity('20%'),
  },
  renderEmptyRowsFallback: () => (
    <div className={styles.noDataWrapper}>
      <NoResultsOverlay badResponse />
    </div>
  ),
  getSubRows: (originalRow) => originalRow.children, // for rendering collapsable sub-rows (tree view) according to our data structure (by default it will search “subRows” field in data object)
  getRowId: (originalRow) => originalRow.rowId,
  muiExpandButtonProps: ({ row }) => ({
    sx: { height: 16, width: 16, padding: 0, '&:hover': { backgroundColor: 'inherit' } },
    children: row.getIsExpanded() ? <ExpandButton /> : <CollapseButton />,
  }),
  muiExpandAllButtonProps: ({ table }) => ({
    sx: { height: 28, width: 28, padding: '3px 0px 0px 0px', marginLeft: '10px', '&:hover': { backgroundColor: 'inherit' } },
    children: table.getIsAllRowsExpanded() ? <CollapseAllButton fill="#29AECE" /> : <ExpandAllButton />,
  }),
  muiTableHeadRowProps: ({ table }) => {
    const { density } = table.getState();
    return {
      sx: tableHeadRowStyles(density),
    };
  },
  muiTableHeadCellProps: ({ column, table }) => {
    const { density } = table.getState();
    const columnWithBorder = borderedHeadersIdList.find((id) => id === column.id);

    return { sx: columnWithBorder ? tableHeadCellStyles(density, true) : tableHeadCellStyles(density) };
  },

Will be glad to any advise.
Thnx