perf: remove offsets.top, keep offsetLeft

mui · Feb 11, 2024 · 2b41c33 · 2b41c33
1 parent 9510b61
commit 2b41c33
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 27 deletions.
diff --git a/packages/x-data-grid/src/components/GridRow.tsx b/packages/x-data-grid/src/components/GridRow.tsx
@@ -23,7 +23,6 @@ import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
-import type { GridVirtualizationState } from '../hooks/features/virtualization';
 import type { GridDimensions } from '../hooks/features/dimensions';
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
@@ -43,7 +42,7 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
   index: number;
   rowHeight: number | 'auto';
   top: number;
-  offsets: GridVirtualizationState['offsets'];
+  offsetLeft: number;
   dimensions: GridDimensions;
   firstColumnToRender: number;
   lastColumnToRender: number;
@@ -120,13 +119,13 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
     row,
     index,
     style: styleProp,
+    top,
     rowHeight,
     className,
     visibleColumns,
     renderedColumns,
     pinnedColumns,
-    top,
-    offsets,
+    offsetLeft,
     dimensions,
     firstColumnToRender,
     lastColumnToRender,
@@ -524,7 +523,7 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
       <div
         role="presentation"
         className={gridClasses.cellOffsetLeft}
-        style={{ width: offsets.left }}
+        style={{ width: offsetLeft }}
       />
       {cells}
       {emptyCellWidth > 0 && <EmptyCell width={emptyCellWidth} />}
@@ -591,10 +590,7 @@ GridRow.propTypes = {
   isLastVisible: PropTypes.bool.isRequired,
   isNotVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
-  offsets: PropTypes.shape({
-    left: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired,
-  }).isRequired,
+  offsetLeft: PropTypes.number.isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
@@ -610,6 +606,7 @@ GridRow.propTypes = {
    * If `null`, no cell in this row is in the tab sequence.
    */
   tabbableCell: PropTypes.string,
+  top: PropTypes.number.isRequired,
   visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
 } as any;
 

diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -9,7 +9,7 @@ import { GridEventListener } from '../../../models/events';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
 import { gridDimensionsSelector } from '../dimensions';
 import {
-  gridOffsetsSelector,
+  gridOffsetLeftSelector,
   gridRenderContextColumnsSelector,
   gridVirtualizationColumnEnabledSelector,
 } from '../virtualization';
@@ -101,7 +101,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
   const innerRef = React.useRef<HTMLDivElement>(null);
   const handleInnerRef = useForkRef(innerRefProp, innerRef);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
+  const offsetLeft = useGridSelector(apiRef, gridOffsetLeftSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
 
@@ -164,7 +164,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
       (visiblePinnedColumns.right.length > 0 && isPinnedRight) ||
       (visiblePinnedColumns.right.length === 0 && isNotPinned);
 
-    const leftOffsetWidth = offsets.left - leftOverflow;
+    const leftOffsetWidth = offsetLeft - leftOverflow;
 
     return (
       <React.Fragment>

diff --git a/packages/x-data-grid/src/hooks/features/virtualization/gridVirtualizationSelectors.ts b/packages/x-data-grid/src/hooks/features/virtualization/gridVirtualizationSelectors.ts
@@ -41,9 +41,9 @@ export const gridRenderContextSelector = createSelector(
  * @category Virtualization
  * @ignore - do not document.
  */
-export const gridOffsetsSelector = createSelector(
+export const gridOffsetLeftSelector = createSelector(
   gridVirtualizationSelector,
-  (state) => state.offsets,
+  (state) => state.offsetLeft,
 );
 
 /**

diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -32,7 +32,7 @@ import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils';
 import { getMinimalContentHeight } from '../rows/gridRowsUtils';
 import { GridRowProps } from '../../../components/GridRow';
 import {
-  gridOffsetsSelector,
+  gridOffsetLeftSelector,
   gridRenderContextSelector,
   gridVirtualizationEnabledSelector,
   gridVirtualizationColumnEnabledSelector,
@@ -76,7 +76,7 @@ export const useGridVirtualScroller = () => {
 
   const previousContext = React.useRef(EMPTY_RENDER_CONTEXT);
   const previousRowContext = React.useRef(EMPTY_RENDER_CONTEXT);
-  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
+  const offsetLeft = useGridSelector(apiRef, gridOffsetLeftSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const scrollPosition = React.useRef({ top: 0, left: 0 }).current;
   const prevTotalWidth = React.useRef(columnsTotalWidth);
@@ -124,7 +124,7 @@ export const useGridVirtualScroller = () => {
           virtualization: {
             ...state.virtualization,
             renderContext: nextRenderContext,
-            offsets: nextOffsets,
+            offsetLeft: nextOffsets.left,
           },
         };
       });
@@ -292,8 +292,6 @@ export const useGridVirtualScroller = () => {
       ) {
         isRowWithFocusedCellNotInRange = true;
 
-        const rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell];
-
         if (indexOfRowWithFocusedCell > firstRowToRender) {
           renderedRowsIndex.current.push(indexOfRowWithFocusedCell);
         } else {
@@ -433,7 +431,7 @@ export const useGridVirtualScroller = () => {
           lastColumnToRender={lastColumnToRender}
           selected={isSelected}
           top={rowsMeta.positions[rowIndexInPage]}
-          offsets={offsets}
+          offsetLeft={offsetLeft}
           dimensions={dimensions}
           isFirstVisible={isFirstVisible}
           isLastVisible={isLastVisible}

diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx
@@ -11,12 +11,7 @@ export type GridVirtualizationState = {
   enabled: boolean;
   enabledForColumns: boolean;
   renderContext: GridRenderContext;
-  offsets: { top: number; left: number };
-};
-
-export const EMPTY_OFFSETS = {
-  top: 0,
-  left: 0,
+  offsetLeft: number;
 };
 
 export const EMPTY_RENDER_CONTEXT = {
@@ -31,7 +26,7 @@ export const virtualizationStateInitializer: GridStateInitializer<RootProps> = (
     enabled: !props.disableVirtualization,
     enabledForColumns: true,
     renderContext: EMPTY_RENDER_CONTEXT,
-    offsets: EMPTY_OFFSETS,
+    offsetLeft: 0,
   };
 
   return {