fix(): address repetitive rendering of grid

Fix #243
petyosi · Dec 22, 2020 · 652eb3a · 652eb3a
1 parent 67a9fb9
commit 652eb3a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/gridSystem.ts b/src/gridSystem.ts
@@ -1,6 +1,6 @@
 import * as u from '@virtuoso.dev/urx'
 import { domIOSystem } from './domIOSystem'
-import { sizeRangeSystem } from './sizeRangeSystem'
+import { sizeRangeSystem, boundryComparator } from './sizeRangeSystem'
 import { stateFlagsSystem } from './stateFlagsSystem'
 import { IndexLocation, normalizeIndexLocation } from './scrollToIndexSystem'
 import { scrollSeekSystem } from './scrollSeekSystem'
@@ -135,8 +135,9 @@ export const gridSystem = u.system(
         u.combineLatest(viewportDimensions, itemDimensions, gridState),
         u.map(([viewport, item, { items }]) => {
           const { top, bottom } = gridLayout(viewport, item, items)
-          return [top, bottom]
-        })
+          return [top, bottom] as [number, number]
+        }),
+        u.distinctUntilChanged(boundryComparator)
       ),
       listBoundary
     )

diff --git a/src/sizeRangeSystem.ts b/src/sizeRangeSystem.ts
@@ -9,7 +9,7 @@ export const NONE = 'none' as const
 export type ListEnd = typeof TOP | typeof BOTTOM
 export type ChangeDirection = typeof UP | typeof DOWN | typeof NONE
 
-const boundryComparator = (prev: NumberTuple, current: NumberTuple) => prev && prev[0] === current[0] && prev[1] === current[1]
+export const boundryComparator = (prev: NumberTuple, current: NumberTuple) => prev && prev[0] === current[0] && prev[1] === current[1]
 
 export const getOverscan = (overscan: Overscan, end: ListEnd, direction: ScrollDirection) => {
   if (typeof overscan === 'number') {