fix: Prevent use-table-interaction-metrics from calling debounced function after unmounting (#4073)

Author: ernst-dev

src/internal/hooks/use-table-interaction-metrics/__tests__/use-table-interaction-metrics.test.tsx

@@ -273,5 +273,22 @@ describe('useTableInteractionMetrics', () => {
         })
       );
     });
+
+    test('componentUpdated should not be called after unmount', () => {
+      const { setLastUserAction, rerender, unmount } = renderUseTableInteractionMetricsHook({});
+
+      setLastUserAction('filter');
+      rerender({ loading: true });
+      rerender({ loading: false });
+
+      // Unmount before the debounced callback fires
+      unmount();
+
+      // Run timers to trigger the debounced callback
+      jest.runAllTimers();
+
+      // componentUpdated should not have been called because component was unmounted
+      expect(ComponentMetrics.componentUpdated).toHaveBeenCalledTimes(0);
+    });
   });
 });

src/internal/hooks/use-table-interaction-metrics/index.ts

@@ -49,10 +49,18 @@ export function useTableInteractionMetrics<T>({
   const lastUserAction = useRef<{ name: string; time: number } | null>(null);
   const capturedUserAction = useRef<string | null>(null);
   const loadingStartTime = useRef<number | null>(null);
+  const isMountedRef = useRef(true);
 
   const metadata = useRef({ itemCount, getComponentIdentifier, getComponentConfiguration, interactionMetadata });
   metadata.current = { itemCount, getComponentIdentifier, getComponentConfiguration, interactionMetadata };
 
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
   useEffect(() => {
     if (isInFunnel) {
       return;
@@ -94,6 +102,9 @@ export function useTableInteractionMetrics<T>({
   }, [instanceIdentifier, loading, taskInteractionId, isInFunnel]);
 
   const debouncedUpdated = useDebounceCallback(() => {
+    if (!isMountedRef.current) {
+      return;
+    }
     ComponentMetrics.componentUpdated({
       taskInteractionId,
       componentName: 'table',