Memory leak in grid component (V: 27.1.50)

[SSangole]

I am using a grid component(V: 27.1.50) to render tasks in react based web application. When dynamically changing the data source based on the selected filter (e.g., gridInstanceMyTask.dataSource = myTasks;), selecting and de-selecting the filter triggers a re-render and updates the data. However, this process continuously increases heap memory, and it is not being garbage collected over time. The retained objects are linked to detached DOM nodes.

Here's the list of actions causing the issue:

• Selecting/de-selecting filters
• Changing the data source dynamically
• Heap memory growth due to detached DOM nodes

UI referring snapshot 1:

UI referring snapshot 2:

Snapshot showcasing retained objects:
1:

2:

3:

4:

How can I optimize memory usage and ensure proper garbage collection?

[vasanthakumarsf3389]

Hi @SSangole,

Greetings from Syncfusion support.

Query: When changing the data source dynamically using external filters, memory usage keeps increasing, and the heap is not being garbage collected properly over time.

After reviewing your provided screenshot (portal memory maintain) details and the action of re-rendering the grid causing memory leaks, we identified that the issue occurs when using column header templates and column templates within the grid. We were able to replicate the issue when rendering the React template components without properly handling them using useCallback and useMemo, or without utilizing stateless templates in the context of React state updates. Please refer to the below issue replicated sample and video demo for your reference.

State update with templates not properly handling (without useCallback and useMemo) issue sample: https://stackblitz.com/edit/react-9yftk3?file=index.js

634194-memory-react-state-handling-issue.mp4

We confirmed that the multiple redefinitions of static React template components are contributing to the memory issue. To resolve this, it's crucial to properly handle the grid component templates based on React state updates. This will prevent memory leaks and ensure optimal performance. For more information, please refer to the following resources:

• Optimizing performance/memory by avoiding re-rendering templates: https://ej2.syncfusion.com/react/documentation/grid/performance#optimizing-react-component-rendering-by-mitigating-unnecessary-re-renders-during-state-updates
• Optimizing performance/memory by avoiding re-rendering same state update: How to Prevent Re-renders in React
• Using stateless templates for efficiency: https://ej2.syncfusion.com/react/documentation/common/template#stateless-template

State update with templates properly handled local sample: GridPerformanceSample.zip

By applying these practices, you can significantly reduce memory consumption and ensure proper garbage collection, preventing heap memory buildup over time.

Regards,
Vasanthakumar K