useGridDimensions: useSyncExternalStore implementation

Author: nstepien

src/DataGrid.tsx

@@ -340,7 +340,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     [columnWidths]
   );
 
-  const [gridRef, gridWidth, gridHeight, horizontalScrollbarHeight] = useGridDimensions();
+  const [gridRef, gridWidth, gridHeight] = useGridDimensions();
   const {
     columns,
     colSpanColumns,
@@ -461,8 +461,6 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
   const maxColIdx = columns.length - 1;
   const selectedCellIsWithinSelectionBounds = isCellWithinSelectionBounds(selectedPosition);
   const selectedCellIsWithinViewportBounds = isCellWithinViewportBounds(selectedPosition);
-  const scrollHeight =
-    headerRowHeight + totalRowHeight + summaryRowsHeight + horizontalScrollbarHeight;
 
   /**
    * The identity of the wrapper function is stable so it won't break memoization
@@ -1189,7 +1187,6 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
         gridTemplateColumns,
         gridTemplateRows: templateRows,
         '--rdg-header-row-height': `${headerRowHeight}px`,
-        '--rdg-scroll-height': `${scrollHeight}px`,
         ...layoutCssVars
       }}
       dir={direction}

src/hooks/useGridDimensions.ts

@@ -1,46 +1,99 @@
-import { useLayoutEffect, useRef, useState } from 'react';
-import { flushSync } from 'react-dom';
+import { useCallback, useId, useLayoutEffect, useRef, useSyncExternalStore } from 'react';
+
+const initialSize: ResizeObserverSize = {
+  inlineSize: 1,
+  blockSize: 1
+};
+
+const targetToIdMap = new Map<HTMLDivElement, string>();
+const idToTargetMap = new Map<string, HTMLDivElement>();
+// use an unmanaged WeakMap so we preserve the cache even when
+// the component partially unmounts via Suspense or Activity
+const sizeMap = new WeakMap<HTMLDivElement, ResizeObserverSize>();
+const subscribers = new Map<string, () => void>();
+
+// don't break in Node.js (SSR), jsdom, and environments that don't support ResizeObserver
+const resizeObserver =
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  globalThis.ResizeObserver == null ? null : new ResizeObserver(resizeObserverCallback);
+
+function resizeObserverCallback(entries: ResizeObserverEntry[]) {
+  for (const entry of entries) {
+    const target = entry.target as HTMLDivElement;
+
+    if (!targetToIdMap.has(target)) continue;
+
+    const id = targetToIdMap.get(target)!;
+
+    updateSize(target, id, entry.contentBoxSize[0]);
+  }
+}
+
+function updateSize(target: HTMLDivElement, id: string, size: ResizeObserverSize) {
+  if (sizeMap.has(target)) {
+    const prevSize = sizeMap.get(target)!;
+    if (prevSize.inlineSize === size.inlineSize && prevSize.blockSize === size.blockSize) {
+      return;
+    }
+  }
+
+  sizeMap.set(target, size);
+  subscribers.get(id)?.();
+}
+
+function getServerSnapshot(): ResizeObserverSize {
+  return initialSize;
+}
 
 export function useGridDimensions() {
+  const id = useId();
   const gridRef = useRef<HTMLDivElement>(null);
-  const [inlineSize, setInlineSize] = useState(1);
-  const [blockSize, setBlockSize] = useState(1);
-  const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = useState(0);
+
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      subscribers.set(id, onStoreChange);
+
+      return () => {
+        subscribers.delete(id);
+      };
+    },
+    [id]
+  );
+
+  const getSnapshot = useCallback((): ResizeObserverSize => {
+    if (idToTargetMap.has(id)) {
+      const target = idToTargetMap.get(id)!;
+      if (sizeMap.has(target)) {
+        return sizeMap.get(target)!;
+      }
+    }
+    return initialSize;
+  }, [id]);
+
+  // We use `useSyncExternalStore` instead of `useState` to avoid tearing,
+  // which can lead to flashing scrollbars.
+  const { inlineSize, blockSize } = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 
   useLayoutEffect(() => {
-    const { ResizeObserver } = window;
-
-    // don't break in Node.js (SSR), jsdom, and browsers that don't support ResizeObserver
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (ResizeObserver == null) return;
-
-    const { clientWidth, clientHeight, offsetWidth, offsetHeight } = gridRef.current!;
-    const { width, height } = gridRef.current!.getBoundingClientRect();
-    const initialHorizontalScrollbarHeight = offsetHeight - clientHeight;
-    const initialWidth = width - offsetWidth + clientWidth;
-    const initialHeight = height - initialHorizontalScrollbarHeight;
-
-    setInlineSize(initialWidth);
-    setBlockSize(initialHeight);
-    setHorizontalScrollbarHeight(initialHorizontalScrollbarHeight);
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      const size = entries[0].contentBoxSize[0];
-      const { clientHeight, offsetHeight } = gridRef.current!;
-
-      // we use flushSync here to avoid flashing scrollbars
-      flushSync(() => {
-        setInlineSize(size.inlineSize);
-        setBlockSize(size.blockSize);
-        setHorizontalScrollbarHeight(offsetHeight - clientHeight);
+    const target = gridRef.current!;
+
+    targetToIdMap.set(target, id);
+    idToTargetMap.set(id, target);
+    resizeObserver?.observe(target);
+
+    if (!sizeMap.has(target)) {
+      updateSize(target, id, {
+        inlineSize: target.clientWidth,
+        blockSize: target.clientHeight
       });
-    });
-    resizeObserver.observe(gridRef.current!);
+    }
 
     return () => {
-      resizeObserver.disconnect();
+      targetToIdMap.delete(target);
+      idToTargetMap.delete(id);
+      resizeObserver?.unobserve(target);
     };
-  }, []);
+  }, [id]);
 
-  return [gridRef, inlineSize, blockSize, horizontalScrollbarHeight] as const;
+  return [gridRef, inlineSize, blockSize] as const;
 }

test/failOnConsole.ts

@@ -5,13 +5,6 @@ beforeAll(() => {
   globalThis.console = {
     ...console,
     error(...params) {
-      if (
-        params[0] instanceof Error &&
-        params[0].message === 'ResizeObserver loop completed with undelivered notifications.'
-      ) {
-        return;
-      }
-
       consoleErrorOrConsoleWarnWereCalled = true;
       console.log(...params);
     },

vite.config.ts

@@ -89,8 +89,7 @@ export default defineConfig(
           target: 'react',
           generatedRouteTree: 'website/routeTree.gen.ts',
           routesDirectory: 'website/routes',
-          autoCodeSplitting: true,
-          verboseFileRoutes: false
+          autoCodeSplitting: true
         }),
       react({
         exclude: ['./.cache/**/*', './node_modules/**/*', './website/routeTree.gen.ts']

website/root.tsx

@@ -2,37 +2,9 @@ import './root.css';
 
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import {
-  createHashHistory,
-  createRouter,
-  ErrorComponent,
-  RouterProvider
-} from '@tanstack/react-router';
+import { RouterProvider } from '@tanstack/react-router';
 
-import { routeTree } from './routeTree.gen';
-
-const router = createRouter({
-  routeTree,
-  history: createHashHistory(),
-  caseSensitive: true,
-  defaultErrorComponent: ErrorComponent,
-  defaultNotFoundComponent: NotFound,
-  defaultPendingMinMs: 0,
-  defaultPreload: 'intent',
-  defaultStructuralSharing: true,
-  scrollRestoration: true
-});
-
-// Register the router instance for type safety
-declare module '@tanstack/react-router' {
-  interface Register {
-    router: typeof router;
-  }
-}
-
-function NotFound() {
-  return 'Nothing to see here';
-}
+import { router } from './router';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>