diff --git a/web/components/visibility-observer.tsx b/web/components/visibility-observer.tsx
index aea2e41d..288d8f0e 100644
--- a/web/components/visibility-observer.tsx
+++ b/web/components/visibility-observer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useEvent } from '../hooks/use-event'
 
 export function VisibilityObserver(props: {
@@ -8,18 +8,16 @@ export function VisibilityObserver(props: {
   const { className } = props
   const [elem, setElem] = useState<HTMLElement | null>(null)
   const onVisibilityUpdated = useEvent(props.onVisibilityUpdated)
-  const observer = useRef(
-    new IntersectionObserver(([entry]) => {
-      onVisibilityUpdated(entry.isIntersecting)
-    }, {})
-  ).current
 
   useEffect(() => {
     if (elem) {
+      const observer = new IntersectionObserver(([entry]) => {
+        onVisibilityUpdated(entry.isIntersecting)
+      }, {})
       observer.observe(elem)
       return () => observer.unobserve(elem)
     }
-  }, [elem, observer])
+  }, [elem, onVisibilityUpdated])
 
   return <div ref={setElem} className={className}></div>
 }