@tanstack/virtual-core 3.0.0-beta.39 → 3.0.0-beta.41

package/src/index.ts

@@ -296,7 +296,10 @@ export class Virtualizer<
   scrollOffset: number
   scrollDirection: ScrollDirection | null = null
   private scrollAdjustments: number = 0
-  private measureElementCache: Record<Key, TItemElement> = {}
+  private measureElementCache: Record<
+    Key,
+    TItemElement & { __virtualizerSkipFirstNotSync?: boolean }
+  > = {}
   private getResizeObserver = (() => {
     let _ro: ResizeObserver | null = null
 
@@ -435,8 +438,6 @@ export class Virtualizer<
           }, this.options.scrollingDelay)
         }),
       )
-    } else if (!this.isScrolling) {
-      this.calculateRange()
     }
   }
 
@@ -487,7 +488,7 @@ export class Virtualizer<
 
   calculateRange = memo(
     () => [this.getMeasurements(), this.getSize(), this.scrollOffset],
-    (measurements, outerSize, scrollOffset) => {
+    (measurements, outerSize, scrollOffset, [flush = true]: [boolean?]) => {
       const range = calculateRange({
         measurements,
         outerSize,
@@ -498,7 +499,9 @@ export class Virtualizer<
         range.endIndex !== this.range.endIndex
       ) {
         this.range = range
-        this.notify()
+        if (flush) {
+          this.notify()
+        }
       }
       return this.range
     },
@@ -511,7 +514,7 @@ export class Virtualizer<
   private getIndexes = memo(
     () => [
       this.options.rangeExtractor,
-      this.range,
+      this.calculateRange(false),
       this.options.overscan,
       this.options.count,
     ],
@@ -542,7 +545,7 @@ export class Virtualizer<
     return parseInt(indexStr, 10)
   }
 
-  private _measureElement = (node: TItemElement, _sync: boolean) => {
+  private _measureElement = (node: TItemElement, sync: boolean) => {
     const index = this.indexFromElement(node)
 
     const item = this.measurementsCache[index]
@@ -555,19 +558,24 @@ export class Virtualizer<
     const ro = this.getResizeObserver()
 
     if (!node.isConnected) {
-      if (prevNode) {
-        ro?.unobserve(prevNode)
+      ro?.unobserve(node)
+      if (node === prevNode) {
         delete this.measureElementCache[item.key]
       }
       return
     }
 
-    if (!prevNode || prevNode !== node) {
+    if (prevNode !== node) {
       if (prevNode) {
         ro?.unobserve(prevNode)
       }
-      this.measureElementCache[item.key] = node
       ro?.observe(node)
+      this.measureElementCache[item.key] = node
+    } else {
+      if (!sync && !prevNode.__virtualizerSkipFirstNotSync) {
+        prevNode.__virtualizerSkipFirstNotSync = true
+        return
+      }
     }
 
     const measuredItemSize = this.options.measureElement(node, this)

package/src/utils.ts

@@ -2,19 +2,23 @@ export type NoInfer<A extends any> = [A][A extends any ? 0 : never]
 
 export type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
 
-export function memo<TDeps extends readonly any[], TResult>(
+export function memo<
+  TDeps extends readonly any[],
+  TResult,
+  FArgs extends readonly any[],
+>(
   getDeps: () => [...TDeps],
-  fn: (...args: NoInfer<[...TDeps]>) => TResult,
+  fn: (...args: [...TDeps, FArgs]) => TResult,
   opts: {
     key: any
     debug?: () => any
     onChange?: (result: TResult) => void
   },
-): () => TResult {
+) {
   let deps: any[] = []
   let result: TResult | undefined
 
-  return () => {
+  return (...fArgs: FArgs): TResult => {
     let depTime: number
     if (opts.key && opts.debug?.()) depTime = Date.now()
 
@@ -33,7 +37,7 @@ export function memo<TDeps extends readonly any[], TResult>(
     let resultTime: number
     if (opts.key && opts.debug?.()) resultTime = Date.now()
 
-    result = fn(...newDeps)
+    result = fn(...newDeps, fArgs)
     opts?.onChange?.(result)
 
     if (opts.key && opts.debug?.()) {