fix:scrollOffsetFn not included in effect dependency list (TanStack#111)

* fix: wrap scrollOffsetFn with ref

* feat: pass scroll event to scrollOffsetFn

Author: piecyk

.eslintrc

@@ -6,5 +6,11 @@
   },
   "parserOptions": {
     "sourceType": "module"
+  },
+  "rules": {
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      { "additionalHooks": "(useIsomorphicLayoutEffect)" }
+    ]
   }
 }

README.md

@@ -281,7 +281,7 @@ const {
   - `onScrollElement: React.useRef(DOMElement)`
    - Optional
    - Allows using a different element to bind the `onScroll` event to
- - `scrollOffsetFn: Function() => number`
+ - `scrollOffsetFn: Function(event?: Event) => number`
    - Optional
    - This function, if passed, is called on scroll to get the scroll offest rather than using `parentRef`'s `width` or `height`
 - `keyExtractor: Function(index) => String | Integer`

src/index.js

@@ -76,16 +76,21 @@ export function useVirtual({
   const [range, setRange] = React.useState({ start: 0, end: 0 })
 
   const element = onScrollElement ? onScrollElement.current : parentRef.current
+
+  const scrollOffsetFnRef = React.useRef(scrollOffsetFn)
+  scrollOffsetFnRef.current = scrollOffsetFn
+
   useIsomorphicLayoutEffect(() => {
     if (!element) {
       return
     }
 
-    const onScroll = () => {
-      const scrollOffset = scrollOffsetFn
-        ? scrollOffsetFn()
+    const onScroll = event => {
+      const scrollOffset = scrollOffsetFnRef.current
+        ? scrollOffsetFnRef.current(event)
         : element[scrollKey]
       latestRef.current.scrollOffset = scrollOffset
+
       setRange(prevRange => calculateRange(latestRef.current, prevRange))
     }
 
@@ -100,7 +105,7 @@ export function useVirtual({
     return () => {
       element.removeEventListener('scroll', onScroll)
     }
-  }, [element, scrollKey, size /* required */, outerSize /* required */])
+  }, [element, scrollKey, size, outerSize])
 
   const virtualItems = React.useMemo(() => {
     const virtualItems = []

types/index.d.ts

@@ -36,7 +36,7 @@ declare function useVirtual<T>(options: {
   }
   keyExtractor?: (index: number) => number | string
   onScrollElement?: React.RefObject<HTMLElement>
-  scrollOffsetFn?: () => number
+  scrollOffsetFn?: (event?: Event) => number
 }): {
   virtualItems: VirtualItem[]
   totalSize: number