[DataGrid] Avoid unnecessary rerenders after updateRows (#7857)

Co-authored-by: Matheus Wichman <[email protected]>
mui · Feb 15, 2023 · a7ed810 · a7ed810
1 parent abc7f7a
commit a7ed810
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 3 deletions.
diff --git a/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx
@@ -283,6 +283,34 @@ describe('<DataGridPro /> - Rows', () => {
       setProps({ loading: false });
       expect(getColumnValues(0)).to.deep.equal(['Nike 2', 'Adidas', 'Puma']);
     });
+
+    it('should not trigger unnecessary cells rerenders', () => {
+      const renderCellSpy = spy((params: any) => {
+        return params.value;
+      });
+      function Test() {
+        apiRef = useGridApiRef();
+        return (
+          <div style={{ width: 300, height: 300 }}>
+            <DataGridPro
+              rows={[{ id: 1, name: 'John' }]}
+              columns={[{ field: 'name', renderCell: renderCellSpy }]}
+              apiRef={apiRef}
+            />
+          </div>
+        );
+      }
+
+      // For some reason the number of renders in test env is 2x the number of renders in the browser
+      const renrederMultiplier = 2;
+
+      render(<Test />);
+      const initialRendersCount = 2;
+      expect(renderCellSpy.callCount).to.equal(initialRendersCount * renrederMultiplier);
+
+      act(() => apiRef.current.updateRows([{ id: 1, name: 'John' }]));
+      expect(renderCellSpy.callCount).to.equal((initialRendersCount + 2) * renrederMultiplier);
+    });
   });
 
   describe('apiRef: setRows', () => {

diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -78,6 +78,18 @@ export const getRenderableIndexes = ({
   ];
 };
 
+const areRenderContextsEqual = (context1: GridRenderContext, context2: GridRenderContext) => {
+  if (context1 === context2) {
+    return true;
+  }
+  return (
+    context1.firstRowIndex === context2.firstRowIndex &&
+    context1.lastRowIndex === context2.lastRowIndex &&
+    context1.firstColumnIndex === context2.firstColumnIndex &&
+    context1.lastColumnIndex === context2.lastColumnIndex
+  );
+};
+
 interface UseGridVirtualScrollerProps {
   ref: React.Ref<HTMLDivElement>;
   disableVirtualization?: boolean;
@@ -293,6 +305,12 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => {
 
   const updateRenderContext = React.useCallback(
     (nextRenderContext: GridRenderContext) => {
+      if (
+        prevRenderContext.current &&
+        areRenderContextsEqual(nextRenderContext, prevRenderContext.current)
+      ) {
+        return;
+      }
       setRenderContext(nextRenderContext);
 
       updateRenderZonePosition(nextRenderContext);

diff --git a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx
@@ -686,13 +686,13 @@ describe('<DataGrid /> - Keyboard', () => {
         <DataGrid rows={rows} columns={columns} />
       </div>,
     );
-    expect(renderCell.callCount).to.equal(6);
+    expect(renderCell.callCount).to.equal(4);
     const input = screen.getByTestId('custom-input');
     input.focus();
     fireEvent.keyDown(input, { key: 'a' });
-    expect(renderCell.callCount).to.equal(8);
+    expect(renderCell.callCount).to.equal(6);
     fireEvent.keyDown(input, { key: 'b' });
-    expect(renderCell.callCount).to.equal(8);
+    expect(renderCell.callCount).to.equal(6);
   });
 
   it('should not scroll horizontally when cell is wider than viewport', () => {