tom/use-event-listener

app/components/Header.tsx

@@ -9,6 +9,7 @@ import { depths } from "@shared/styles";
 import Button from "~/components/Button";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
+import useEventListener from "~/hooks/useEventListener";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 import { supportsPassiveListener } from "~/utils/browser";
@@ -29,19 +30,17 @@ function Header({ breadcrumb, title, actions, hasSidebar }: Props) {
   const passThrough = !actions && !breadcrumb && !title;
 
   const [isScrolled, setScrolled] = React.useState(false);
-  const handleScroll = React.useCallback(
-    throttle(() => setScrolled(window.scrollY > 75), 50),
+  const handleScroll = React.useMemo(
+    () => throttle(() => setScrolled(window.scrollY > 75), 50),
     []
   );
 
-  React.useEffect(() => {
-    window.addEventListener(
-      "scroll",
-      handleScroll,
-      supportsPassiveListener ? { passive: true } : false
-    );
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, [handleScroll]);
+  useEventListener(
+    "scroll",
+    handleScroll,
+    window,
+    supportsPassiveListener ? { passive: true } : { capture: false }
+  );
 
   const handleClickTitle = React.useCallback(() => {
     window.scrollTo({