[Performance issue] Rendering slowly when set editable columns dynamically

[JandenMa]

UI Lib

• Material-UI (v4.9.5)

Version

• v7.5.0

Scenario

Well I have a situation that need to add/remove editable columns dynamically by checkboxes. So when a checkbox be checked, i would add the column to table, and set empty/default value to editable cells of this column. Otherwise remove the column from table and get rid of field from data.

My solution

• I have a table component based on react-table
• Pass columns and data into table component from higher component
• Set Cell for columns in useMemo in table component like the pic below (I hid some sensitive codes in the pic, most of those cases set Cell as CustomTextField, CustomTextField is a customize input component which is based on TextField)
  
• When adding/removing columns, i handle data and columns in higher component, and pass them into table component

Issue

• Seems if there are many rows, and when i added more columns, it would render soooo slowly.
• But if I replaced the CustomTextField with <input /> it would be a little faster.
• If I replaced CustomTextField with other uneditable components (like Typography), it would be normal.

What I need

• I wanna know the reason about this issue
• How can I resolve this performance issue

---

@tannerlinsley could you take a look if available? Thx.
If someone else knows how to resolve it or improve the performance, let me know pls. Thx in advance!