score:5

Accepted answer

analysis

material-table adds a property column.tableData to each column of your columns list, and then there is an assignment that effectively does something like (see file data-manager.js):

column[0].tableData.width = "calc(" + ... +
  column[0].tableData.width + ... +
  column[1].tableData.width + ... + ")"

column[1].tableData.width = "calc(" + ... 
...

Because the columns are in the global scope and are not destroyed on every unmount, this lets the string tableData.width grow exponentially. I guess the increasingly long time it takes comes from these increasingly many nested "calc()" invocations.

conclusion

I hesitate to call this a bug in material-table.

It looks like material-table expects the columns to be created on every render (and not to be persistent). Fair enough, but I would at least call this unexpected behavior for somebody who is used to work in React, and there should be a warning about this in the documentation. I also think even then that could have been implemented foolproof. (if somebody disagrees, I'd like to read reasons in the comments)

example

The first time the component is mounted the tableData.width is:

calc((100% - (0px +
  calc((100% - (0px)) / 3) +
  calc((100% - (0px)) / 3) +
  calc((100% - (0px)) / 3)
)) / 3)

After un-mount and a second mount the width tableData.width is:

calc((100% - (0px +
  calc((100% - (0px + 
    calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) + 
    calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) + 
    calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3)
  )) / 3) +
  calc((100% - (0px + 
    calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) + 
    calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) + 
    calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3)
  )) / 3) +
  calc((100% - (0px + 
    calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) + 
    calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) + 
    calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3)
  )) / 3)
)) / 3)"

score:0

The columns array should be static to a material table instance. When it is dynamically called again and again, the memory fills and finally runs out of space.


Related Query

More Query from same tag