fix: update width state less

Author: amliu-jumptrading

src/hooks/useQuickSearchWidth.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useSlotsNavigation } from "./useSlotsNavigation";
 import {
   numQuickSearchSlots,
@@ -8,37 +8,49 @@ import {
   slotNavWithoutListWidth,
   slotSearchPadding,
 } from "../consts";
-import { useMount } from "react-use";
+import { throttle } from "lodash";
 
 export function useQuickSearchWidth() {
-  const [width, setWidth] = useState(window.innerWidth);
   const { showOnlyEpochBar, showNav } = useSlotsNavigation();
+  const getQuickSearchWidth = useCallback(
+    (width: number) => {
+      const outletWidth = showOnlyEpochBar
+        ? width - slotNavWithoutListWidth
+        : showNav
+          ? width - slotNavWidth
+          : width;
 
-  useMount(() => {
-    function handleResize() {
-      setWidth(window.innerWidth);
-    }
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  });
+      const numCardsPerRow = Math.min(
+        numQuickSearchSlots,
+        Math.floor(
+          (outletWidth - 2 * slotSearchPadding + quickSearchSpacing) /
+            (quickSearchCardWidth + quickSearchSpacing),
+        ),
+      );
 
-  const outletWidth = showOnlyEpochBar
-    ? width - slotNavWithoutListWidth
-    : showNav
-      ? width - slotNavWidth
-      : width;
+      return (
+        numCardsPerRow * quickSearchCardWidth +
+        (numCardsPerRow - 1) * quickSearchSpacing +
+        2 * slotSearchPadding
+      );
+    },
+    [showNav, showOnlyEpochBar],
+  );
 
-  const numCardsPerRow = Math.min(
-    numQuickSearchSlots,
-    Math.floor(
-      (outletWidth - 2 * slotSearchPadding + quickSearchSpacing) /
-        (quickSearchCardWidth + quickSearchSpacing),
-    ),
+  const [quickSearchWidth, setQuickSearchWidth] = useState(
+    getQuickSearchWidth(window.innerWidth),
   );
-  const quickSearchWidth =
-    numCardsPerRow * quickSearchCardWidth +
-    (numCardsPerRow - 1) * quickSearchSpacing +
-    2 * slotSearchPadding;
+
+  useEffect(() => {
+    const handleResize = throttle(
+      () => setQuickSearchWidth(getQuickSearchWidth(window.innerWidth)),
+      50,
+      { leading: false, trailing: true },
+    );
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, [getQuickSearchWidth]);
 
   return quickSearchWidth;
 }