Data Grid - Performance
Improve the performance of the DataGrid using the recommendations from this guide.
Memoize inner components with React.memo
The DataGrid component is composed of a central state object where all data is stored.
When an API method is called, a prop changes, or the user interacts with the UI (e.g. filtering a column), this state object is updated with the changes made.
To reflect the changes in the interface, the component must re-render.
Since the state behaves like React.useState, the DataGrid component will re-render its children, including column headers, rows, and cells.
With smaller datasets, this is not a problem for concern, but it can become a bottleneck if the number of rows increases, especially if many columns render custom content.
One way to overcome this issue is using React.memo to only re-render the child components when their props have changed.
To start using memoization, import the inner components, then pass their memoized version to the respective slots, as follow:
import {
GridRow,
GridColumnHeaders,
DataGrid, // or DataGridPro, DataGridPremium
} from '@mui/x-data-grid';
const MemoizedRow = React.memo(GridRow);
const MemoizedColumnHeaders = React.memo(GridColumnHeaders);
<DataGrid
slots={{
row: MemoizedRow,
columnHeaders: MemoizedColumnHeaders,
}}
/>;
The following demo show this trick in action. It also contains additional logic to highlight the components when they re-render.