diff options
Diffstat (limited to 'thallium-frontend/src/utils/hooks.ts')
-rw-r--r-- | thallium-frontend/src/utils/hooks.ts | 14 |
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; |