datatable component high memory usage issue

[ivanybma]

hi carbon support, our customer recently reported that the ram usage increase significantly after user did a some operations. I reproduced it with a usecase open and close datatable just with toolbar, i see that when initial page loaded with around 400m occupied and when I tried open and close datatable(empty) multiple times, the memory goes up to 1.3 g.

below is a simple test script I created in https://stackblitz.com/edit/github-nnd4nb-cditxj?file=src%2FApp.jsx,src%2FdataComponent.jsx,src%2FwrapperComponent.jsx

I attache the above project here:

github-nnd4nb-cditxj.zip

I also attached a video to show how I see the problem and how I reproduced it. would u pls help to check.

https://github.com/carbon-design-system/carbon/assets/8086092/fdd262f0-c01c-4091-8b43-ae928f2eb020

[ivanybma]

hi @2nikhiltom , is there any estimation on this issue? our customer keep pushing us for this issue. It would be helpful even though a high level estimation.

[Gururajj77]

We can reproduce this issue on stackblitz, but could you recreate this using an example which is more usable so that it helps us to narrow down what is exactly causing the memory hog.

We do not experience this issue on our storybooks: https://react.carbondesignsystem.com/iframe.html?args=&id=components-datatable-dynamic--default&viewMode=story https://react.carbondesignsystem.com/iframe.html?args=&id=components-datatable-basic--default&viewMode=story

If you have profiled what could be the cause for this, could you please let us know?

[tay1orjones]

At a glance, this could be rooted somewhere in how it's being used. I wonder if it could be tied to the usage of the array and .push()ing elements to it in return of render().

[sangeetar]

@tay1orjones do you know when a fix for this issue would be available? This issue is the root cause for an issue reported by a customer and we need to provide an ETA on when this would be fixed. Thanks.

[tay1orjones]

@sangeetar Sorry for the confusion, but I'm not seeing any bugs in the DataTable code. This issue appears to be rooted in how you're using/configuring these components. Again I would suggest avoiding push()ing to an array to render elements. I would also suggest using the react dev tools to profile your example and debug to determine why the component is re-rendering so many times.

[ivanybma]

hi @tay1orjones , I got some confuse here, u said we cannot put it into array ? in our code attached in this item, there is no push at all, the content is by hardcode only. and u can see the code below, I did tried only give an empty array to the row and header, no more array here, it still has same problem.

https://github.com/carbon-design-system/carbon/assets/8086092/59a994fb-1034-410a-9640-d143c1617928

this is the code: (https://stackblitz.com/edit/github-nnd4nb-ktnz5g?file=src%2FdataComponent.jsx)

and for your question " why the component is re-rendering so many times", our user will edit and close different stage in our canvas to edit table data with no limited times. they open to edit for one table, then open and edit for another one. So it is very normal to do this many times.

Normally they will not do the something I did here(e.g open, close,open close.......). this is a way I reproduce this problem with a very simple datatable use case which only have less than 10 rows here. In real case, user always have over 1000 of rows in a datatable. so they will experience this high memory usage issue when they play with it multiple times.

for " This issue appears to be rooted in how you're using/configuring these components" , we now configure datatable by feeding in a render function, u think there is problem here? or what else configuration is not right?

[ivanybma]

hi @tay1orjones , can we get some update on this issue with my latest testing script?

[tay1orjones]

@ivanybma Hey there, thanks for the updated reproduction. Unfortunately, I still can't reproduce this. I used the "open preview in a new window" feature in stackblitz to rule out anything caused by the stackblitz editor. I spam click and keyboard a bunch and the browser tab memory doesn't shift.

https://github.com/carbon-design-system/carbon/assets/3360588/6e907d7c-b692-4949-b2e4-780ce2b1a004

If we can get a clear reproduction of the issue, we'd be happy to take a closer look.