fixes

packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx

@@ -28,7 +28,7 @@ interface UseGridColumnHeadersProps {
 }
 
 function isUIEvent(event: any): event is React.UIEvent {
-  return !!event.type;
+  return !!event.target;
 }
 
 export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
@@ -58,26 +58,26 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
     apiRef.current.columnHeadersContainerElementRef!.current!.scrollLeft = 0;
   }, [apiRef]);
 
-  const updateInnerPosition = React.useCallback(() => {
-    if (!renderContext) {
-      return;
-    }
-    const firstColumnToRender = Math.max(
-      renderContext!.firstColumnIndex - rootProps.columnBuffer,
-      minColumnIndex,
-    );
+  const updateInnerPosition = React.useCallback(
+    (nextRenderContext: GridRenderContext) => {
+      const firstColumnToRender = Math.max(
+        nextRenderContext!.firstColumnIndex - rootProps.columnBuffer,
+        minColumnIndex,
+      );
 
-    const offset =
-      firstColumnToRender > 0
-        ? prevScrollLeft.current - columnPositions[firstColumnToRender]
-        : prevScrollLeft.current;
+      const offset =
+        firstColumnToRender > 0
+          ? prevScrollLeft.current - columnPositions[firstColumnToRender]
+          : prevScrollLeft.current;
 
-    innerRef!.current!.style.transform = `translate3d(${-offset}px, 0px, 0px)`;
-  }, [columnPositions, minColumnIndex, renderContext, rootProps.columnBuffer]);
+      innerRef!.current!.style.transform = `translate3d(${-offset}px, 0px, 0px)`;
+    },
+    [columnPositions, minColumnIndex, rootProps.columnBuffer],
+  );
 
   React.useLayoutEffect(() => {
     if (renderContext) {
-      updateInnerPosition();
+      updateInnerPosition(renderContext);
     }
   }, [renderContext, updateInnerPosition]);
 
@@ -98,20 +98,31 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
       }
       prevScrollLeft.current = left;
 
+      // We can only update the position when we guarantee that the render context has been already
+      // rendered. This is achieved using ReactDOM.flushSync or when the context doesn't change.
+      let canUpdateInnerPosition = false;
+
       if (nextRenderContext !== prevRenderContext.current || !prevRenderContext.current) {
-        // There're two situations that can fire `rowsScroll`:
-        // - a `scroll` event (UI event)
-        // - a container width change
-        // We can only use ReactDOM.flushSync for UI events or a warning is logged.
-        if (isUIEvent(event) && event.type === 'scroll') {
-          ReactDOM.flushSync(() => setRenderContext(nextRenderContext));
+        // ReactDOM.flushSync cannot be called on `scroll` events fired inside effects
+        if (isUIEvent(event)) {
+          // To prevent flickering, the inner position can only be updated after the new context has
+          // been rendered. ReactDOM.flushSync ensures that the state changes will happen before
+          // updating the position.
+          ReactDOM.flushSync(() => {
+            setRenderContext(nextRenderContext);
+          });
+          canUpdateInnerPosition = true;
         } else {
           setRenderContext(nextRenderContext);
         }
-
         prevRenderContext.current = nextRenderContext;
       } else {
-        updateInnerPosition();
+        canUpdateInnerPosition = true;
+      }
+
+      // Pass directly the render context to avoid waiting for the next render
+      if (nextRenderContext && canUpdateInnerPosition) {
+        updateInnerPosition(nextRenderContext);
       }
     },
     [updateInnerPosition],
@@ -199,7 +210,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
           column={column}
           colIndex={columnIndex}
           isResizing={resizeCol === column.field}
-          isLastColumn={columnIndex === visibleColumns.length - 1}
+          isLastColumn={columnIndex === columns.length - 1}
           extendRowFullWidth={!rootProps.disableExtendRowFullWidth}
           hasFocus={hasFocus}
           tabIndex={tabIndex}
@@ -221,6 +232,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
     renderContext,
     getColumns,
     isDragging: !!dragCol,
+    updateInnerPosition,
     getRootProps: (other = {}) => ({ style: rootStyle, ...other }),
     getInnerProps: () => ({ ref: handleInnerRef, 'aria-rowindex': 1, role: 'row' }),
   };

packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx

@@ -273,7 +273,10 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => {
     );
 
     if (shouldSetState) {
-      ReactDOM.flushSync(() => updateRenderContext(nextRenderContext));
+      // Prevents batching render context changes
+      ReactDOM.flushSync(() => {
+        updateRenderContext(nextRenderContext)
+      });
       prevTotalWidth.current = columnsTotalWidth;
     }
   };