Performance of dynamic grid

[DoHoangYen]

Hi, thank for your wonderful component.
I have some issues when I use a dynamic grid. I'm coding by javascript (not typescript), I need to show/hide column so I choose a dynamic grid, the column is change by setState, when I have multiple row data, it's slow (because render all data), I read documentation and know useMemo/useCallback to improve performance, but if I use columns from state, what should I do to it quickly?
Thank for your help!

<DynamicDataSheetGrid
                value={this.state.data}
                columns={this.state.columns}
                onChange={this.onChangeData}
            />

[nick-keller]

Hello @DoHoangYen ,
Yes you should wrap non-primitive types in useMemo when using DynamicDataSheetGrid, with hooks it looks like that:

const [showColumn, setShowColumn] = useState(true)

const columns = useMemo(() => showColumn ? [{/*...*/}, {/*...*/}] : [{/*...*/}], [showColumn])

return <DynamicDataSheetGrid columns={columns} />

Here I have a state showColumn that is a boolean for this example, but it could be anything really. Based on showColumn I return an array with two or one column. I add showColumn as a dependency of useMemo to re-compute the columns when showColumn changes.

This way columns will only be updated when showColumn changes.

If you are using class components you can use the state I guess, doing <DynamicDataSheetGrid columns={this.state.columns} />. This way you simply need to update your state with new columns to show / hide columns, just make sur to define a new array everytime (don't just update the existing array):

this.setState({ columns: this.state.columns.push({/* add column */}) }) // ❌
this.setState({ columns: [...this.state.columns, {/* add column */}] }) // ✅

[DoHoangYen]

Thank for the quick reply :)