@envive-ai/react-hooks 0.3.29 → 0.3.31

package/src/hooks/Intersection/useIntersection.ts

@@ -1,26 +1,50 @@
-import { RefObject, useEffect, useState } from 'react';
+import { RefObject, useEffect, useRef, useState } from 'react';
 
 // https://rasilbaidar.medium.com/trigger-event-when-element-enters-viewport-the-react-way-168509da2e23
 export const useIntersection = (element: RefObject<HTMLElement>, rootMargin: string) => {
   const [isVisible, setIsVisible] = useState(false);
+  const observerRef = useRef<IntersectionObserver | null>(null);
 
+  // Runs after every render so it catches when element.current transitions from null
+  // to a mounted DOM node (e.g. when a conditionally-rendered element first appears).
+  // Bails immediately once the observer is attached, keeping per-render cost O(1).
   useEffect(() => {
     const current = element?.current;
+    console.debug('[useIntersection] effect ran', {
+      elementCurrent: current,
+      rootMargin,
+      alreadyObserving: !!observerRef.current,
+    });
+
+    if (!current) {
+      console.debug('[useIntersection] element.current is null — observer NOT attached');
+      return;
+    }
+    if (observerRef.current) return; // already observing
+
     const observer = new IntersectionObserver(
       ([entry]) => {
+        console.debug('[useIntersection] IntersectionObserver fired', {
+          isIntersecting: entry.isIntersecting,
+          intersectionRatio: entry.intersectionRatio,
+          boundingClientRect: entry.boundingClientRect,
+          target: entry.target,
+        });
         setIsVisible(entry.isIntersecting);
       },
       { rootMargin },
     );
 
-    if (current) {
-      observer?.observe(current);
-    }
+    observer.observe(current);
+    observerRef.current = observer;
+    console.debug('[useIntersection] observer attached to element', current);
+  });
 
+  // Disconnect on unmount only — intentionally separate from the setup effect above.
+  useEffect(() => {
     return () => {
-      if (current) {
-        observer.unobserve(current);
-      }
+      observerRef.current?.disconnect();
+      observerRef.current = null;
     };
   }, []);
 

package/src/hooks/TrackComponentVisibleEvent/useTrackComponentVisibleEvent.ts

@@ -30,26 +30,42 @@ export const useTrackComponentVisibleEvent = (
   const variantInfo = useAtomValue(pageVariantInfoAtom);
 
   useEffect(() => {
-    if (!enabled || hasTrackedEvent.current) {
+    console.debug('[useTrackComponentVisibleEvent] effect ran', {
+      enabled,
+      isVisible,
+      hasTrackedEvent: hasTrackedEvent.current,
+      eventProps,
+    });
+
+    if (!enabled) {
+      console.debug('[useTrackComponentVisibleEvent] skipped — enabled is false');
       return;
     }
-    if (isVisible) {
-      trackEvent({
-        eventName: SpiffyMetricsEventName.ChatComponentVisible,
-        eventProps,
-      });
-      trackEvent({
-        eventName: EnviveMetricsEventName.WidgetRendered,
-        eventProps: {
-          ...eventProps,
-          trigger: {
-            widget: eventProps?.widget_type,
-          },
-          context: variantInfo ? extractPageContext(variantInfo as PageVariantInfo) : null,
-        },
-      });
-      hasTrackedEvent.current = true;
+    if (hasTrackedEvent.current) {
+      console.debug('[useTrackComponentVisibleEvent] skipped — event already tracked');
+      return;
     }
+    if (!isVisible) {
+      console.debug('[useTrackComponentVisibleEvent] skipped — element not visible');
+      return;
+    }
+
+    console.debug('[useTrackComponentVisibleEvent] firing tracking events', eventProps);
+    trackEvent({
+      eventName: SpiffyMetricsEventName.ChatComponentVisible,
+      eventProps,
+    });
+    trackEvent({
+      eventName: EnviveMetricsEventName.WidgetRendered,
+      eventProps: {
+        ...eventProps,
+        trigger: {
+          widget: eventProps?.widget_type,
+        },
+        context: variantInfo ? extractPageContext(variantInfo as PageVariantInfo) : null,
+      },
+    });
+    hasTrackedEvent.current = true;
   }, [enabled, isVisible, eventProps, trackEvent]);
   return { isVisible };
 };