Possible solution to scroll-jump

Author: bvaughn

lib/components/list/useDynamicRowHeight.test.ts

@@ -197,4 +197,6 @@ describe("useDynamicRowHeight", () => {
   });
 
   // setRowHeight is tested indirectly by "getAverageRowHeight" and "getRowHeight" blocks above
+
+  // TODO Add tests for issue #863
 });

lib/components/list/useDynamicRowHeight.ts

@@ -39,14 +39,24 @@ export function useDynamicRowHeight({
       return defaultRowHeight;
     }
 
-    return totalHeight / map.size;
+    return Math.round(totalHeight / map.size);
   }, [defaultRowHeight, map]);
 
   const getRowHeight = useCallback(
     (index: number) => {
-      return map.get(index);
+      const measuredHeight = map.get(index);
+      if (measuredHeight !== undefined) {
+        return measuredHeight;
+      }
+
+      // Temporarily store default height in the cache map to avoid scroll jumps if rowProps change
+      // Else rowProps changes can impact the average height, and cause rows to shift up or down within the list
+      // see github.com/bvaughn/react-window/issues/863
+      map.set(index, defaultRowHeight);
+
+      return defaultRowHeight;
     },
-    [map]
+    [defaultRowHeight, map]
   );
 
   const setRowHeight = useCallback((index: number, size: number) => {

lib/hooks/useStableCallback.ts

@@ -6,7 +6,7 @@ export function useStableCallback<Args, Return>(
   fn: (args: Args) => Return
 ): (args: Args) => Return {
   const ref = useRef<typeof fn>(() => {
-    throw new Error("Cannot call an event handler while rendering.");
+    throw new Error("Cannot call during render.");
   });
 
   useIsomorphicLayoutEffect(() => {

src/routes/ScratchpadRoute.tsx

@@ -9,6 +9,7 @@ import {
 type Item = {
   children: Array<{ index: number }>;
   id: number;
+  minHeight: number;
   name: string;
 };
 
@@ -86,20 +87,21 @@ function Row({
   items: Item[];
   toggleExpand: (id: number) => void;
 }>) {
-  const item = items[index];
+  const { children, minHeight, name } = items[index];
+
   const isExpanded = expandedSet.has(index);
 
   return (
-    <div className="py-1 px-2 flex items-center gap-2" style={style}>
-      <Button
-        disabled={!item.children.length}
-        onClick={() => toggleExpand(index)}
-      >
-        {!item.children.length || isExpanded ? "–" : "+"}
+    <div
+      className="py-1 px-2 flex items-center gap-2"
+      style={{ ...style, minHeight }}
+    >
+      <Button disabled={!children.length} onClick={() => toggleExpand(index)}>
+        {!children.length || isExpanded ? "–" : "+"}
       </Button>
-      {item.name}
+      {name}
       {isExpanded && (
-        <pre className="text-xs">{JSON.stringify(item.children, null, 2)}</pre>
+        <pre className="text-xs">{JSON.stringify(children, null, 2)}</pre>
       )}
     </div>
   );
@@ -114,6 +116,7 @@ function createItems() {
         index
       })),
       id: index,
+      minHeight: 24 + 5 * (index % 3),
       name: `item ${index}`
     });
   }