[DataGrid] Make possible to memoize rows and cells (#7846)

Signed-off-by: Matheus Wichman <[email protected]>
Co-authored-by: Andrew Cherniavskii <[email protected]>

docs/data/data-grid/overview/DataGridProDemo.js

@@ -1,8 +1,12 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPro, GridRow, GridColumnHeaders } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
+const MemoizedRow = React.memo(GridRow);
+
+const MemoizedColumnHeaders = React.memo(GridColumnHeaders);
+
 export default function DataGridProDemo() {
   const { data } = useDemoData({
     dataSet: 'Commodity',
@@ -18,6 +22,10 @@ export default function DataGridProDemo() {
         rowHeight={38}
         checkboxSelection
         disableRowSelectionOnClick
+        components={{
+          Row: MemoizedRow,
+          ColumnHeaders: MemoizedColumnHeaders,
+        }}
       />
     </Box>
   );

docs/data/data-grid/overview/DataGridProDemo.tsx

@@ -1,8 +1,12 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPro, GridRow, GridColumnHeaders } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
+const MemoizedRow = React.memo(GridRow);
+
+const MemoizedColumnHeaders = React.memo(GridColumnHeaders);
+
 export default function DataGridProDemo() {
   const { data } = useDemoData({
     dataSet: 'Commodity',
@@ -18,6 +22,10 @@ export default function DataGridProDemo() {
         rowHeight={38}
         checkboxSelection
         disableRowSelectionOnClick
+        components={{
+          Row: MemoizedRow,
+          ColumnHeaders: MemoizedColumnHeaders,
+        }}
       />
     </Box>
   );

docs/data/data-grid/overview/DataGridProDemo.tsx.preview

@@ -4,4 +4,8 @@
   rowHeight={38}
   checkboxSelection
   disableRowSelectionOnClick
+  components={{
+    Row: MemoizedRow,
+    ColumnHeaders: MemoizedColumnHeaders,
+  }}
 />

docs/data/data-grid/performance/GridWithReactMemo.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { teal } from '@mui/material/colors';
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { DataGridPro, GridRow, GridColumnHeaders } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const TraceUpdates = React.forwardRef((props, ref) => {
+  const { Component, ...other } = props;
+  const rootRef = React.useRef();
+  const handleRef = useForkRef(rootRef, ref);
+
+  React.useEffect(() => {
+    rootRef.current?.classList.add('updating');
+
+    const timer = setTimeout(() => {
+      rootRef.current?.classList.remove('updating');
+    }, 500);
+
+    return () => clearTimeout(timer);
+  });
+
+  return <Component ref={handleRef} {...other} />;
+});
+
+const RowWithTracer = React.forwardRef((props, ref) => {
+  return <TraceUpdates ref={ref} Component={GridRow} {...props} />;
+});
+
+const ColumnHeadersWithTracer = React.forwardRef((props, ref) => {
+  return <TraceUpdates ref={ref} Component={GridColumnHeaders} {...props} />;
+});
+
+const MemoizedRow = React.memo(RowWithTracer);
+const MemoizedColumnHeaders = React.memo(ColumnHeadersWithTracer);
+
+export default function GridWithReactMemo() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    editable: true,
+    maxColumns: 15,
+  });
+
+  return (
+    <Box
+      sx={{
+        height: 400,
+        width: '100%',
+        '&&& .updating': (theme) => ({
+          background: teal[theme.palette.mode === 'dark' ? 900 : 100],
+          transition: theme.transitions.create('background', {
+            duration: theme.transitions.duration.standard,
+          }),
+        }),
+      }}
+    >
+      <DataGridPro
+        {...data}
+        rowHeight={38}
+        checkboxSelection
+        disableRowSelectionOnClick
+        slots={{
+          row: MemoizedRow,
+          columnHeaders: MemoizedColumnHeaders,
+        }}
+      />
+    </Box>
+  );
+}

docs/data/data-grid/performance/GridWithReactMemo.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { teal } from '@mui/material/colors';
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { DataGridPro, GridRow, GridColumnHeaders } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const TraceUpdates = React.forwardRef<any, any>((props, ref) => {
+  const { Component, ...other } = props;
+  const rootRef = React.useRef<HTMLElement>();
+  const handleRef = useForkRef(rootRef, ref);
+
+  React.useEffect(() => {
+    rootRef.current?.classList.add('updating');
+
+    const timer = setTimeout(() => {
+      rootRef.current?.classList.remove('updating');
+    }, 500);
+
+    return () => clearTimeout(timer);
+  });
+
+  return <Component ref={handleRef} {...other} />;
+});
+
+const RowWithTracer = React.forwardRef((props, ref) => {
+  return <TraceUpdates ref={ref} Component={GridRow} {...props} />;
+});
+
+const ColumnHeadersWithTracer = React.forwardRef((props, ref) => {
+  return <TraceUpdates ref={ref} Component={GridColumnHeaders} {...props} />;
+});
+
+const MemoizedRow = React.memo(RowWithTracer);
+const MemoizedColumnHeaders = React.memo(ColumnHeadersWithTracer);
+
+export default function GridWithReactMemo() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    editable: true,
+    maxColumns: 15,
+  });
+
+  return (
+    <Box
+      sx={{
+        height: 400,
+        width: '100%',
+        '&&& .updating': (theme) => ({
+          background: teal[theme.palette.mode === 'dark' ? 900 : 100],
+          transition: theme.transitions.create('background', {
+            duration: theme.transitions.duration.standard,
+          }),
+        }),
+      }}
+    >
+      <DataGridPro
+        {...data}
+        rowHeight={38}
+        checkboxSelection
+        disableRowSelectionOnClick
+        slots={{
+          row: MemoizedRow,
+          columnHeaders: MemoizedColumnHeaders,
+        }}
+      />
+    </Box>
+  );
+}

docs/data/data-grid/performance/GridWithReactMemo.tsx.preview

@@ -0,0 +1,10 @@
+<DataGridPro
+  {...data}
+  rowHeight={38}
+  checkboxSelection
+  disableRowSelectionOnClick
+  slots={{
+    row: MemoizedRow,
+    columnHeaders: MemoizedColumnHeaders,
+  }}
+/>

docs/data/data-grid/performance/performance.md

@@ -0,0 +1,47 @@
+# Data Grid - Performance
+
+<p class="description">Improve the performance of the DataGrid using the recommendations from this guide.</p>
+
+## 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](/x/react-data-grid/column-definition/#rendering-cells).
+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:
+
+```tsx
+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.
+
+{{"demo": "GridWithReactMemo.js", "bg": "inline", "defaultCodeOpen": false}}
+
+:::warning
+We do not ship the components above already wrapped with `React.memo` because if you have rows whose cells display custom content not derived from the received props, e.g. selectors, these cells may display outdated information.
+If you define a column with a custom cell renderer where content comes from a [selector](/x/react-data-grid/state/#catalog-of-selectors) that changes more often than the props passed to `GridRow`, the row component should not be memoized.
+:::
+
+## API
+
+- [DataGrid](/x/api/data-grid/data-grid/)
+- [DataGridPro](/x/api/data-grid/data-grid-pro/)
+- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md

@@ -270,6 +270,17 @@ Most of this breaking change is handled by `preset-safe` codemod but some furthe
 - The `GridActionsCellProps['api']` property was removed. Use `useGridApiContext` hook instead to get `apiRef`.
 - The `GridActionsCellProps['getValue']` property was removed. Use `params.row` instead.
 - The `GridFooterCellProps['getValue']` property was removed. Use `params.row` instead.
+- The `cellFocus`, `cellTabIndex` and `editRowsState` props are not passed to the `Row` slot anymore.
+  Use the `focusedCell` and `tabbableCell` props instead.
+  For the editing state, use the API methods.
+  ```diff
+   const CustomRow = (props) => {
+  -  const focusedField = props.cellFocus.field;
+  +  const focusedField = props.focusedCell;
+  -  const tabIndex = props.cellTabIndex.field && cellMode === 'view' ? 0 : 1;
+  +  const tabIndex = props.tabbableCell === column.field ? 0 : 1;
+   }
+  ```
 
 ### Pagination
 
@@ -449,12 +460,6 @@ Most of this breaking change is handled by `preset-safe` codemod but some furthe
   | `.MuiDataGrid-withBorder`                  | `.MuiDataGrid-withBorderColor`              | The class only sets `border-color` CSS property |
   | `.MuiDataGrid-filterFormLinkOperatorInput` | `.MuiDataGrid-filterFormLogicOperatorInput` |                                                 |
 
-<!--
-### Virtualization
-
-TBD
--->
-
 ### Removals from the public API
 
 - The `getGridSingleSelectQuickFilterFn` function was removed.

docs/data/pages.ts

@@ -71,6 +71,7 @@ const pages: MuiPage[] = [
       { pathname: '/x/react-data-grid/scrolling' },
       { pathname: '/x/react-data-grid/virtualization' },
       { pathname: '/x/react-data-grid/accessibility' },
+      { pathname: '/x/react-data-grid/performance' },
       {
         pathname: '/x/react-data-grid-group-pivot',
         title: 'Group & Pivot',

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -274,6 +274,7 @@
       "default": "GridColumnHeaderFilterIconButton",
       "type": { "name": "elementType" }
     },
+    "columnHeaders": { "default": "DataGridColumnHeaders", "type": { "name": "elementType" } },
     "columnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } },
     "columnMenuAggregationIcon": {
       "default": "GridFunctionsIcon",

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -248,6 +248,7 @@
       "default": "GridColumnHeaderFilterIconButton",
       "type": { "name": "elementType" }
     },
+    "columnHeaders": { "default": "DataGridColumnHeaders", "type": { "name": "elementType" } },
     "columnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } },
     "columnMenuClearIcon": { "default": "GridClearIcon", "type": { "name": "elementType" } },
     "columnMenuFilterIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } },

docs/pages/x/api/data-grid/data-grid.json

@@ -193,6 +193,7 @@
       "default": "GridColumnHeaderFilterIconButton",
       "type": { "name": "elementType" }
     },
+    "columnHeaders": { "default": "DataGridColumnHeaders", "type": { "name": "elementType" } },
     "columnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } },
     "columnMenuClearIcon": { "default": "GridClearIcon", "type": { "name": "elementType" } },
     "columnMenuFilterIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } },

docs/pages/x/react-data-grid/performance.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docsx/data/data-grid/performance/performance.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}

docs/translations/api-docs/data-grid/data-grid-premium.json

@@ -701,6 +701,7 @@
     "cell": "Component rendered for each cell.",
     "columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.",
     "columnHeaderFilterIconButton": "Filter icon component rendered in each column header.",
+    "columnHeaders": "Component responsible for rendering the column headers.",
     "columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.",
     "columnMenuAggregationIcon": "Icon displayed in column menu for aggregation",
     "columnMenuClearIcon": "Icon displayed in column menu for clearing values",

docs/translations/api-docs/data-grid/data-grid-pro.json

@@ -687,6 +687,7 @@
     "cell": "Component rendered for each cell.",
     "columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.",
     "columnHeaderFilterIconButton": "Filter icon component rendered in each column header.",
+    "columnHeaders": "Component responsible for rendering the column headers.",
     "columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.",
     "columnMenuClearIcon": "Icon displayed in column menu for clearing values",
     "columnMenuFilterIcon": "Icon displayed in column menu for filter",

docs/translations/api-docs/data-grid/data-grid.json

@@ -655,6 +655,7 @@
     "cell": "Component rendered for each cell.",
     "columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.",
     "columnHeaderFilterIconButton": "Filter icon component rendered in each column header.",
+    "columnHeaders": "Component responsible for rendering the column headers.",
     "columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.",
     "columnMenuClearIcon": "Icon displayed in column menu for clearing values",
     "columnMenuFilterIcon": "Icon displayed in column menu for filter",

packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -9,11 +9,10 @@ import {
   GridRoot,
   GridContextProvider,
   GridValidRowModel,
+  useGridSelector,
+  gridPinnedColumnsSelector,
 } from '@mui/x-data-grid-pro';
-import {
-  DataGridProVirtualScroller,
-  DataGridProColumnHeaders,
-} from '@mui/x-data-grid-pro/internals';
+import { DataGridProVirtualScroller } from '@mui/x-data-grid-pro/internals';
 import { useDataGridPremiumComponent } from './useDataGridPremiumComponent';
 import { DataGridPremiumProps } from '../models/dataGridPremiumProps';
 import { useDataGridPremiumProps } from './useDataGridPremiumProps';
@@ -30,13 +29,15 @@ const DataGridPremiumRaw = React.forwardRef(function DataGridPremium<R extends G
 
   useLicenseVerifier('x-data-grid-premium', releaseInfo);
 
+  const pinnedColumns = useGridSelector(privateApiRef, gridPinnedColumnsSelector);
+
   return (
     <GridContextProvider privateApiRef={privateApiRef} props={props}>
       <GridRoot className={props.className} style={props.style} sx={props.sx} ref={ref}>
         <GridHeader />
         <GridBody
-          ColumnHeadersComponent={DataGridProColumnHeaders}
           VirtualScrollerComponent={DataGridProVirtualScroller}
+          ColumnHeadersProps={{ pinnedColumns }}
         >
           <Watermark packageName="x-data-grid-premium" releaseInfo={releaseInfo} />
         </GridBody>

packages/grid/x-data-grid-premium/src/index.ts

@@ -19,6 +19,8 @@ export * from './hooks';
 export * from './models';
 export * from './components';
 
+export { GridColumnHeaders } from '@mui/x-data-grid-pro';
+
 export type {
   DataGridPremiumProps,
   GridExperimentalPremiumFeatures,