update useInView hook

components/RUA/RUACodeSandbox.tsx

@@ -21,8 +21,7 @@ const RUACodeSandbox = ({ url }: Props) => {
   const currentTheme = theme === 'system' ? systemTheme : theme ?? 'light';
 
   const { ref, inView } = useInView();
-  const sandUrl = new URL(url);
+  const embed = new URL(url).pathname.split('/')[2];
-  const embed = sandUrl.pathname.split('/')[2];
   const [src, setSrc] = useState('');
   useEffect(() => {
     inView &&

lib/hooks/useInView.ts

@@ -1,23 +1,26 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 const useInView = () => {
   const ref = useRef(null);
   const [inView, setInView] = useState(false);
 
-  useEffect(() => {
+  const observeCallback: IntersectionObserverCallback = useCallback(
-    const observer = new IntersectionObserver((entries, observer) => {
+    (entries, observer) => {
       entries.forEach((entry) => {
-        if (entry.isIntersecting) {
+        if (!entry.isIntersecting) return;
-          if (ref.current) {
+        if (!ref.current) return;
-            setInView(true);
+        setInView(true);
-            observer.unobserve(ref.current);
+        observer.unobserve(ref.current);
-          }
-        }
       });
-    });
+    },
+    []
+  );
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(observeCallback);
 
     ref.current && observer.observe(ref.current);
-  }, []);
+  }, [observeCallback]);
 
   return { ref, inView };
 };