Material-table: Freezing UI on rowStyle: Paused before potential out-of-memory crash

[alexdobsom]

Bug descriptions
Every time, after one or two clicks on the buttons of my UI, I get a permanent freeze of the entire interface. I tested it with multiple versions and still encounter the same problem. After a few seconds of freezing the browser goes in debug mode (see screenshot below)

I have dynamic columns based on the current page I'm viewing

columns={ columns }

which appears that is causing the problem !!!

How to reproduce
I have this code in the table's options:

options={{ 
         rowStyle: (rowData) => ({
                backgroundColor: rowData.highlighted === true ? "#ffeb3b5c" : ""
                color: rowData.red === true ? "red" : "", 
          })
}}

Screenshots
This is what's happening in the browser's in Sources via Inspect. It is actually going in debug mode after a few seconds of freezing:

I don't know how to fix this issue.

[Kogl1n]

I experience exactly the same freeze problem and could narrow it down to rowStyle:

rowStyle: (rowData, index) => {
          if (index % 2) {
            return {backgroundColor: "#f2f2f2", maxHeight: '50px'}
          } else {
            return {maxHeight: '50px'}
          }
      }

When the table component is shown performance goes down that simple Radio Button click animations become slower and slower.

[alexdobsom]

I experience exactly the same freeze problem and could narrow it down to rowStyle:

@Kogl1n Do you have dynamic columns? If so, try to make them static.

[Kogl1n]

@alexdobsom Indeed. I first thought the problem was caused by the loop rendering multiple tables (but limited amount) from data I receive from an endpoint API. I will try using static columns and make the tables visible depending on the data I receive. It worked perfectly in this way before, though.

[alexdobsom]

@Kogl1n it seems that the more rules and conditions you add to your app the best is to have the columns in your Table.jsx file. If you pass them as props, they may cause the entire app to halt or even crash.
For me it worked by having a switch conditional before the table, based on the location.pathname so it returned me the needed columns based on the current page. The data works even if I passed it as a prop.

Previously I was using the columns data from props based on current page.

It worked before I added row styling however.

[danielgp1984]

I also have the same problem from version 1.69.0 or higher

[andyvanhelsing]

can confirm, v1.68.1 does not seem to have this problem

[danielgp1984]

I am executing version 1.68.0 and this version no have problem.

[RedFish]

Did you try to use useCallback to declare your function ?

const rowStyle = useCallback((rowData, index) => {
          if (index % 2) {
            return {backgroundColor: "#f2f2f2", maxHeight: '50px'}
          } else {
            return {maxHeight: '50px'}
          }
}, []);

[danielgp1984]

Yes, I am trying but I am not successful, only in version 1.68.0 I am successful, with or without callback