Skip to content

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 {
  DataGrid, // or DataGridPro, DataGridPremium
} from '@mui/x-data-grid';

const MemoizedRow = React.memo(GridRow);
const MemoizedColumnHeaders = React.memo(GridColumnHeaders);

    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.