Defining Columns in Helper Files Causes Performance Issues

[SawkaDev]

Describe the bug In the case you create a "Wrapper" component, a component that can render multiple different types of tables with different headers etc, I put the column definitions in a separate helper file. In the end after multiple re-renders my app got really slow and eventually it crashes.

To Reproduce Steps to reproduce the behavior:

1. Define a component that uses MaterialTable
2. When defining the column field for the MaterialTable put the definition of columns in another file
3. Constantly mount and unmound the component by navigating to and from that page in a SPA
4. See error

Expected behavior For clean code we should be able to define columns into different helper files / header files

Desktop (please complete the following information):

• OS: windows
• Browser: I only tested in chrome / firefox in both instances the browser will eventually show you an alert "this page is causing your browser to run slow do you want to stop page" or something along that

Additional context The bug and fix is actually already outlined on this website which someone else outlined the exact same problem i had:https://getridbug.com/reactjs/why-memory-leak-happend-and-render-slowing-down-when-i-close-and-re-open-react-component-material-table/

I feel this limitation should at least be noted on the material-table doc that putting column definitions in a seperate file and not within the component itself could cause poor performance

This issue to the experienced developer could have been found quick, but for me took more than a few days to root cause.

[JuampiLopez19]

Thanks a lot! I was worried about that, thinking it was data's fault, never thought it was for headers.

[JuampiLopez19]

If you declarate the constants as an array returned from a function, you will solve it:

export const columns = () => { return [ { title: 'Header1', field: 'header1', }, { title: 'Header2', field: 'header2', }, ]; };

[SawkaDev]

If you declarate the constants as an array returned from a function, you will solve it:

export const columns = () => { return [ { title: 'Header1', field: 'header1', }, { title: 'Header2', field: 'header2', }, ]; };

Great idea. I just had a const defined in a separate file, using a function may work. However, this is still a valid bug in my opinion until at the very minimum the docs make a note of this.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[Bucci83]

Thanks to this bug report I was able to fix it, but I agree with @Sliffcak this bug should be fixed