feat:update throttle

Author: jeremy-babylonlabs

package-lock.json

@@ -96,9 +96,10 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
     "@popperjs/core": "^2.11.8",
+    "decimal.js-light": "^2.5.1",
+    "lodash": "^4.17.21",
     "react-hook-form": "^7.54.0",
     "react-popper": "^2.3.0",
-    "decimal.js-light": "^2.5.1",
     "tw-colors": "^3.3.2"
   }
-}
+}

package.json

@@ -1,11 +1,13 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { throttle } from "lodash";
 
 /**
  * Hook to detect if the viewport is in mobile size
  * @param breakpoint - The breakpoint in pixels (default: 768)
+ * @param throttleMs - The throttle delay in milliseconds (default: 100)
  * @returns boolean indicating if viewport is mobile size
  */
-export function useIsMobile(breakpoint: number = 768): boolean {
+export function useIsMobile(breakpoint: number = 768, throttleMs: number = 100): boolean {
   const [isMobile, setIsMobile] = useState(() => {
     // Initial state based on current window width
     if (typeof window !== "undefined") {
@@ -14,17 +16,23 @@ export function useIsMobile(breakpoint: number = 768): boolean {
     return false;
   });
 
-  useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth < breakpoint);
-    };
+  const throttledCheckMobile = useRef<(() => void) | null>(null);
 
-    checkMobile();
+  const checkMobile = useCallback(() => {
+    setIsMobile(window.innerWidth < breakpoint);
+  }, [breakpoint]);
 
-    window.addEventListener("resize", checkMobile);
+  useEffect(() => {
+    throttledCheckMobile.current = throttle(checkMobile, throttleMs);
+    checkMobile();
+    window.addEventListener("resize", throttledCheckMobile.current);
 
-    return () => window.removeEventListener("resize", checkMobile);
-  }, [breakpoint]);
+    return () => {
+      if (throttledCheckMobile.current) {
+        window.removeEventListener("resize", throttledCheckMobile.current);
+      }
+    };
+  }, [checkMobile, throttleMs]);
 
   return isMobile;
 }