fix: calculate range when outer size is defined and count > 0 (#603)

TanStack · Oct 8, 2023 · 8c3e23d · 8c3e23d
1 parent 1efbfb0
commit 8c3e23d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 25 deletions.
diff --git a/packages/react-virtual/__tests__/index.test.tsx b/packages/react-virtual/__tests__/index.test.tsx
@@ -41,18 +41,27 @@ function List({
 
   const parentRef = React.useRef<HTMLDivElement>(null)
 
+  const elementRectCallbackRef = React.useRef<
+    ((rect: { height: number; width: number }) => void) | null
+  >(null)
+
   const rowVirtualizer = useVirtualizer({
     count,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 50,
     overscan,
     observeElementRect: (_, cb) => {
       cb({ height, width })
+      elementRectCallbackRef.current = cb
     },
     measureElement: () => itemSize ?? 0,
     rangeExtractor,
   })
 
+  React.useEffect(() => {
+    elementRectCallbackRef.current?.({ height, width })
+  }, [height, width])
+
   const measureElement = dynamic ? rowVirtualizer.measureElement : undefined
 
   const items = rowVirtualizer.getVirtualItems()
@@ -172,3 +181,11 @@ test('should handle count change', () => {
   expect(screen.queryByText('Row 4')).toBeInTheDocument()
   expect(screen.queryByText('Row 5')).not.toBeInTheDocument()
 })
+
+test('should handle handle height change', () => {
+  const { rerender } = render(<List count={0} height={0} />)
+
+  expect(screen.queryByText('Row 0')).not.toBeInTheDocument()
+  rerender(<List count={1} height={200} />)
+  expect(screen.queryByText('Row 0')).toBeInTheDocument()
+})
diff --git a/packages/virtual-core/__tests__/index.test.ts b/packages/virtual-core/__tests__/index.test.ts
@@ -4,7 +4,7 @@ test('should export the Virtualizer class', () => {
   expect(Virtualizer).toBeDefined()
 })
 
-test('shoul', () => {
+test('should return empty items for empty scroll element', () => {
   const virtualizer = new Virtualizer({
     count: 100,
     getScrollElement: () => null,

diff --git a/packages/virtual-core/src/index.ts b/packages/virtual-core/src/index.ts
@@ -307,10 +307,7 @@ export class Virtualizer<
       unobserve: (target: Element) => get()?.unobserve(target),
     }
   })()
-  range: { startIndex: number; endIndex: number } = {
-    startIndex: 0,
-    endIndex: 0,
-  }
+  range: { startIndex: number; endIndex: number } | null = null
 
   constructor(opts: VirtualizerOptions<TScrollElement, TItemElement>) {
     this.setOptions(opts)
@@ -385,15 +382,8 @@ export class Virtualizer<
 
       this.unsubs.push(
         this.options.observeElementRect(this, (rect) => {
-          const prev = this.scrollRect
           this.scrollRect = rect
-          if (
-            this.options.horizontal
-              ? rect.width !== prev.width
-              : rect.height !== prev.height
-          ) {
-            this.maybeNotify()
-          }
+          this.maybeNotify()
         }),
       )
 
@@ -549,11 +539,14 @@ export class Virtualizer<
   calculateRange = memo(
     () => [this.getMeasurements(), this.getSize(), this.scrollOffset],
     (measurements, outerSize, scrollOffset) => {
-      return (this.range = calculateRange({
-        measurements,
-        outerSize,
-        scrollOffset,
-      }))
+      return (this.range =
+        measurements.length > 0 && outerSize > 0
+          ? calculateRange({
+              measurements,
+              outerSize,
+              scrollOffset,
+            })
+          : null)
     },
     {
       key: process.env.NODE_ENV !== 'production' && 'calculateRange',
@@ -563,9 +556,13 @@ export class Virtualizer<
 
   private maybeNotify = memo(
     () => {
-      const range = this.calculateRange()
+      this.calculateRange()
 
-      return [range.startIndex, range.endIndex, this.isScrolling]
+      return [
+        this.range ? this.range.startIndex : null,
+        this.range ? this.range.endIndex : null,
+        this.isScrolling,
+      ]
     },
     () => {
       this.notify()
@@ -574,8 +571,8 @@ export class Virtualizer<
       key: process.env.NODE_ENV !== 'production' && 'maybeNotify',
       debug: () => this.options.debug,
       initialDeps: [
-        this.range.startIndex,
-        this.range.endIndex,
+        this.range ? this.range.startIndex : null,
+        this.range ? this.range.endIndex : null,
         this.isScrolling,
       ],
     },
@@ -587,10 +584,9 @@ export class Virtualizer<
       this.calculateRange(),
       this.options.overscan,
       this.options.count,
-      this.getSize(),
     ],
-    (rangeExtractor, range, overscan, count, outerSize) => {
-      return outerSize === 0
+    (rangeExtractor, range, overscan, count) => {
+      return range === null
         ? []
         : rangeExtractor({
             ...range,