[DataGrid] Fix deferred rendering race condition

packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualRows.ts

@@ -1,9 +1,5 @@
 import * as React from 'react';
-import {
-  GRID_DEBOUNCED_RESIZE,
-  GRID_NATIVE_SCROLL,
-  GRID_ROWS_SCROLL,
-} from '../../../constants/eventsConstants';
+import { GRID_NATIVE_SCROLL, GRID_ROWS_SCROLL } from '../../../constants/eventsConstants';
 import { GridApiRef } from '../../../models/api/gridApiRef';
 import { GridVirtualizationApi } from '../../../models/api/gridVirtualizationApi';
 import { GridCellIndexCoordinates } from '../../../models/gridCell';
@@ -21,7 +17,6 @@ import { useGridState } from '../core/useGridState';
 import { GridPaginationState } from '../pagination/gridPaginationState';
 import { gridPaginationSelector } from '../pagination/gridPaginationSelector';
 import { gridRowCountSelector } from '../rows/gridRowsSelector';
-import { useGridApiEventHandler } from '../../root/useGridApiEventHandler';
 import { useGridApiMethod } from '../../root/useGridApiMethod';
 import { useNativeEventListener } from '../../root/useNativeEventListener';
 import { useLogger } from '../../utils/useLogger';
@@ -420,5 +415,4 @@ export const useGridVirtualRows = (apiRef: GridApiRef): void => {
     GRID_NATIVE_SCROLL,
     preventViewportScroll,
   );
-  useGridApiEventHandler(apiRef, GRID_DEBOUNCED_RESIZE, updateViewport);
 };

packages/grid/_modules_/grid/hooks/utils/useResizeContainer.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { debounce } from '@material-ui/core/utils';
 import { GRID_DEBOUNCED_RESIZE, GRID_RESIZE } from '../../constants/eventsConstants';
-import { ElementSize, GridEventsApi } from '../../models';
+import { ElementSize, GridEventsApi, GridRowsProp } from '../../models';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../root/useGridApiEventHandler';
 import { useGridApiMethod } from '../root/useGridApiMethod';
 import { useLogger } from './useLogger';
@@ -10,7 +10,10 @@ import { optionsSelector } from './optionsSelector';
 
 const isTestEnvironment = process.env.NODE_ENV === 'test';
 
-export function useResizeContainer(apiRef, { autoHeight }: { autoHeight?: boolean }) {
+export function useResizeContainer(
+  apiRef,
+  { autoHeight, rows }: { autoHeight?: boolean; rows: GridRowsProp },
+) {
   const gridLogger = useLogger('useResizeContainer');
   const options = useGridSelector(apiRef, optionsSelector);
   const warningShown = React.useRef(false);
@@ -78,6 +81,11 @@ export function useResizeContainer(apiRef, { autoHeight }: { autoHeight?: boolea
     };
   }, [gridLogger, debounceResize]);
 
+  React.useEffect(() => {
+    gridLogger.info('canceling resize...');
+    debounceResize.clear();
+  }, [rows, debounceResize, gridLogger]);
+
   useGridApiEventHandler(apiRef, GRID_RESIZE, handleResize);
   useGridApiOptionHandler(apiRef, GRID_DEBOUNCED_RESIZE, options.onResize);
 }

packages/storybook/src/stories/grid-rows.stories.tsx

@@ -915,6 +915,20 @@ export function SwitchVirtualization() {
     </div>
   );
 }
+export function DeferRendering() {
+  const [deferRows, setRows] = React.useState<any>([]);
+  const [deferColumns] = React.useState([{ field: 'id', headerName: 'Id', width: 100 }]);
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setRows(() => [{ id: '1' }, { id: '2' }]), 0);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+
+  return <XGrid autoHeight columns={deferColumns} rows={deferRows} />;
+}
 
 export const ZeroHeightGrid = () => (
   <div style={{ width: 300, height: 0 }}>

test/e2e/fixtures/DataGrid/ConcurrentReactUpdate.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { DataGrid, GridRowModel } from '@material-ui/data-grid';
+
+const columns = [{ field: 'id', headerName: 'Id', width: 100 }];
+
+export default function ConcurrentReactUpdate() {
+  const [rows, setRows] = React.useState<GridRowModel[]>([]);
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setRows([{ id: 1 }, { id: 2 }]), 0);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+
+  return <DataGrid autoHeight columns={columns} rows={rows} />;
+}

test/e2e/index.test.ts

@@ -106,6 +106,15 @@ describe('e2e', () => {
       ).to.equal('initial-focus');
     });
 
+    it('should display the rows', async () => {
+      await renderFixture('DataGrid/ConcurrentReactUpdate');
+      expect(
+        await page.evaluate(() =>
+          Array.from(document.querySelectorAll('[role="cell"]')).map((node) => node.textContent),
+        ),
+      ).to.deep.equal(['1', '2']);
+    });
+
     it('should work with a select as the edit cell', async () => {
       await renderFixture('DataGrid/SelectEditCell');
       await page.dblclick('"Nike"');