Correct dependencies of useMemo and useEffect in useVisible

owl-corp · Sep 11, 2024 · 1b5a4f5 · 1b5a4f5
1 parent 00e71b8
commit 1b5a4f5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/thallium-frontend/src/components/CartStatus.tsx b/thallium-frontend/src/components/CartStatus.tsx
@@ -22,7 +22,7 @@ transition: all 0.25s;
 ${Card} {
   box-shadow: none;
 }
-`
+`;
 
 const FloatingButton = styled(Button) <{ $visible: boolean }>`
 position: fixed;

diff --git a/thallium-frontend/src/utils/hooks.ts b/thallium-frontend/src/utils/hooks.ts
@@ -1,25 +1,25 @@
 import { useState, useEffect, useMemo } from "react";
 import { type RefObject } from "react";
 
-export function useVisible(ref: RefObject<HTMLElement>, initialState: boolean = false) {
+export function useVisible(ref: RefObject<HTMLElement>, initialState = false) {
   const [isVisible, setVisible] = useState(initialState);
 
   const intersectionObserver = useMemo(() => {
     return new IntersectionObserver(
-      ([entry]) => { setVisible(entry.isIntersecting) },
+      ([entry]) => { setVisible(entry.isIntersecting); },
       {
         threshold: 0.5
       }
-    )
-  }, [ref]);
+    );
+  }, []);
 
 
   useEffect(() => {
     if (ref.current)
       intersectionObserver.observe(ref.current);
 
     return () => { intersectionObserver.disconnect(); };
-  }, [ref]);
+  }, [ref, intersectionObserver]);
 
   return isVisible;
 }
@@ -34,11 +34,11 @@ export function useMediaQuery(query: string) {
   useEffect(() => {
     const listenHook = (e: MediaQueryListEvent) => {
       setMatches(e.matches);
-    }
+    };
 
     queryObject.addEventListener("change", listenHook);
 
-    return () => queryObject.removeEventListener("change", listenHook);
+    return () => { queryObject.removeEventListener("change", listenHook); };
   }, [queryObject]);
 
   return matches;