useDynamicRowHeight: Don't call ResizeObserver when server-rendering

Author: bvaughn

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.2.6
+
+- `useDynamicRowHeight` should not instantiate `ResizeObserver` when server-rendering
+
 ## 2.2.5
 
 - Use `defaultHeight`/`defaultWidth` prop to server render initial set of rows/cells

integrations/next/app/list-dynamic/components/List.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { List as ListExternal, useDynamicRowHeight } from "react-window";
+import { RowComponent } from "./RowComponent";
+
+export function List() {
+  const rowHeight = useDynamicRowHeight({
+    defaultRowHeight: 30
+  });
+
+  return (
+    <ListExternal
+      className="h-[250px]"
+      defaultHeight={250}
+      overscanCount={0}
+      rowComponent={RowComponent}
+      rowCount={100}
+      rowHeight={rowHeight}
+      rowProps={{}}
+    />
+  );
+}

integrations/next/app/list-dynamic/components/RowComponent.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { type RowComponentProps } from "react-window";
+
+export function RowComponent({
+  ariaAttributes,
+  index,
+  style
+}: RowComponentProps<object>) {
+  return (
+    <div className="flex items-center gap-1" style={style} {...ariaAttributes}>
+      Row {index}
+    </div>
+  );
+}

integrations/next/app/list-dynamic/page.tsx

@@ -0,0 +1,17 @@
+import {
+  AnimationFrameRowCellCounter,
+  EnvironmentMarker,
+  LayoutShiftDetecter
+} from "../../../tests";
+import { List } from "./components/List";
+
+export default async function Home() {
+  return (
+    <div className="p-2 flex flex-col gap-2">
+      <EnvironmentMarker>NextJS (server components)</EnvironmentMarker>
+      <AnimationFrameRowCellCounter />
+      <LayoutShiftDetecter />
+      <List />
+    </div>
+  );
+}

integrations/next/app/page.tsx

@@ -4,6 +4,7 @@ export default async function Home() {
   return (
     <div className="p-2 flex flex-col gap-2">
       <Link href="/list">List</Link>
+      <Link href="/list-dynamic">List + useDynamicRowHeight</Link>
       <Link href="/grid">Grid</Link>
     </div>
   );

integrations/vike/pages/index/+Page.tsx

@@ -2,6 +2,7 @@ export default function Page() {
   return (
     <div className="p-2 flex flex-col gap-2">
       <a href="/list">List</a>
+      <a href="/list-dynamic">List + useDynamicRowHeight</a>
       <a href="/grid">Grid</a>
     </div>
   );

integrations/vike/pages/list-dynamic/+Page.tsx

@@ -0,0 +1,30 @@
+import { List, useDynamicRowHeight } from "react-window";
+import {
+  AnimationFrameRowCellCounter,
+  EnvironmentMarker,
+  LayoutShiftDetecter
+} from "../../../tests";
+import { RowComponent } from "./RowComponent";
+
+export default function Page() {
+  const rowHeight = useDynamicRowHeight({
+    defaultRowHeight: 30
+  });
+
+  return (
+    <div className="p-2 flex flex-col gap-2">
+      <EnvironmentMarker>Vike (server rendering)</EnvironmentMarker>
+      <AnimationFrameRowCellCounter />
+      <LayoutShiftDetecter />
+      <List
+        className="h-[250px]"
+        defaultHeight={250}
+        overscanCount={0}
+        rowComponent={RowComponent}
+        rowCount={100}
+        rowHeight={rowHeight}
+        rowProps={{}}
+      />
+    </div>
+  );
+}

integrations/vike/pages/list-dynamic/RowComponent.tsx

@@ -0,0 +1,13 @@
+import { type RowComponentProps } from "react-window";
+
+export function RowComponent({
+  ariaAttributes,
+  index,
+  style
+}: RowComponentProps<object>) {
+  return (
+    <div className="flex items-center gap-1" style={style} {...ariaAttributes}>
+      Row {index}
+    </div>
+  );
+}

lib/components/list/useDynamicRowHeight.ts

@@ -103,22 +103,29 @@ export function useDynamicRowHeight({
     }
   );
 
-  const [resizeObserver] = useState(
-    () => new ResizeObserver(resizeObserverCallback)
-  );
+  const [resizeObserver] = useState(() => {
+    if (typeof ResizeObserver !== "undefined") {
+      return new ResizeObserver(resizeObserverCallback);
+    }
+  });
 
   useEffect(() => {
-    return () => {
-      resizeObserver.disconnect();
-    };
+    if (resizeObserver) {
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
   }, [resizeObserver]);
 
   const observeRowElements = useCallback(
     (elements: Element[] | NodeListOf<Element>) => {
-      elements.forEach((element) => resizeObserver.observe(element));
-      return () => {
-        elements.forEach((element) => resizeObserver.unobserve(element));
-      };
+      if (resizeObserver) {
+        elements.forEach((element) => resizeObserver.observe(element));
+        return () => {
+          elements.forEach((element) => resizeObserver.unobserve(element));
+        };
+      }
+      return () => {};
     },
     [resizeObserver]
   );