Data Grid - Performance
Improve the performance of the DataGrid using the recommendations from this guide.
Extract static objects and memoize root props
The DataGrid component uses React.memo to optimize its performance, which means itself and its subcomponents only
re-render when their props change. But it's very easy to cause unnecessary re-renders if the root props of your
DataGrid aren't memoized. Take the example below, the slots and initialState objects are re-created on every
render, which means the DataGrid itself has no choice but to re-render as well.
function Component(props) {
return (
<DataGrid
rows={props.rows}
slots={{
row: CustomRow,
}}
cellModesModel={{ [props.rows[0].id]: { name: { mode: GridCellModes.Edit } } }}
/>
);
}
An easy way to prevent re-renders is to extract any object that can be a static object, and to memoize any object that depends on another object. This applies to any prop that is an object or a function.
const slots = {
row: CustomRow,
};
function Component(props) {
const cellModesModel = React.useMemo(
() => ({ [props.rows[0].id]: { name: { mode: GridCellModes.Edit } } }),
[props.rows],
);
return (
<DataGrid rows={props.rows} slots={slots} cellModesModel={cellModesModel} />
);
}
Visualization
The DataGrid memoizes some of its subcomponents to avoid re-rendering more than needed. Below is a visualization that shows you which cells re-render in reaction to your interaction with the grid.