How to make DetailsList more performant when rendering a custom component in the columns?

Question

I'm trying to render a not so big DetailsList (something between 100-200 rows) where I have a custom column with the CommandBarcomponent. One of the actions is a delete action that deletes the row itself. The problem that I am facing with this is that after I click to delete the row, the code takes more time that I would expect to rerender, producing the feel of a slow system.

Running in dev, I get a pretty slow performance that is quite unpleasant. (My machine is a i7 with 16GbRam so the problem should not be my machine).

Running in production though I get an 'ok' performance but not a great performance as I would like.

Code sample: https://codepen.io/pedro-beslogic/pen/eYNWLLo

I have commented the line 141 to exemplify what I consider a great performance

React profiler file: https://beslogic-my.sharepoint.com/:u:/p/pedro_ferreira/EQ-P0K6-uYZFqhPNIcMtbmsBNWU6CUXrQjuexCPhPkibpQ?e=JMjnoa

Chrome performance file: https://beslogic-my.sharepoint.com/:u:/p/pedro_ferreira/EbogBtQwPWVCpwCrIIFfAdYBsOX1BlYB0cOWl7Zy1KwanA?e=Z53Qyi

Am I doing something wrong or is it a better way to make the table more performant?

Answer 1

I got an answer after opening an issue on their gitHub. Instead of using the CommandBar component inside of the DetailList, we can use the IconButton component with the prop menuProps.