Correct dependencies of useMemo and useEffect in useVisible

1 files changed, 7 insertions, 7 deletions

diff --git a/thallium-frontend/src/utils/hooks.ts b/thallium-frontend/src/utils/hooks.ts
index 79486a3..c68a4a6 100644
--- a/thallium-frontend/src/utils/hooks.ts
+++ b/thallium-frontend/src/utils/hooks.ts
@@ -1,17 +1,17 @@
 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(() => {
@@ -19,7 +19,7 @@ export function useVisible(ref: RefObject<HTMLElement>, initialState: boolean =
       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;