fix(hooks): optimize useScrollPosition with useCallback and useRef

Author: Gaic4o

.changeset/lucky-cobras-jog.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/use-scroll-position": major
+---
+
+WHAT: Refactored the useScrollPosition hook to improve performance and stability by using useCallback for the handler function and useRef for throttleTimeout.

packages/hooks/use-scroll-position/src/index.ts

@@ -1,8 +1,8 @@
-import {useRef, useEffect} from "react";
+import {useRef, useEffect, useCallback} from "react";
 
 const isBrowser = typeof window !== "undefined";
 
-export type ScrollValue = {x: any; y: any};
+export type ScrollValue = {x: number; y: number};
 
 function getScrollPosition(element: HTMLElement | undefined | null): ScrollValue {
   if (!isBrowser) return {x: 0, y: 0};
@@ -41,26 +41,28 @@ export const useScrollPosition = (props: UseScrollPositionOptions): ScrollValue
     isEnabled ? getScrollPosition(elementRef?.current) : {x: 0, y: 0},
   );
 
-  let throttleTimeout: ReturnType<typeof setTimeout> | null = null;
+  const throttleTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const handler = () => {
+  const handler = useCallback(() => {
     const currPos = getScrollPosition(elementRef?.current);
 
     if (typeof callback === "function") {
       callback({prevPos: position.current, currPos});
     }
 
     position.current = currPos;
-    throttleTimeout = null;
-  };
+    throttleTimeout.current = null;
+  }, [callback, elementRef]);
 
   useEffect(() => {
     if (!isEnabled) return;
 
     const handleScroll = () => {
       if (delay) {
-        if (throttleTimeout === null) {
-          throttleTimeout = setTimeout(handler, delay);
+        if (throttleTimeout.current === null) {
+          throttleTimeout.current = setTimeout(() => {
+            handler();
+          }, delay);
         }
       } else {
         handler();
@@ -71,7 +73,12 @@ export const useScrollPosition = (props: UseScrollPositionOptions): ScrollValue
 
     target.addEventListener("scroll", handleScroll);
 
-    return () => target.removeEventListener("scroll", handleScroll);
+    return () => {
+      target.removeEventListener("scroll", handleScroll);
+      if (throttleTimeout.current) {
+        clearTimeout(throttleTimeout.current);
+      }
+    };
   }, [elementRef?.current, delay, isEnabled]);
 
   return position.current;