Refactor EventList and useStickyHeader components to utilize virtualizer ref for improved performance

- Changed import of React in global.d.ts to use type imports.
- Updated EventList component to store virtualizer in a ref, avoiding unnecessary dependencies in useEffect and useCallback hooks.
- Modified useStickyHeader to use virtualizer ref for accessing virtualizer methods, enhancing performance and compliance with React hooks rules.
- Adjusted useVirtualization to maintain virtualizer ref and streamline dependency management in hooks.

Author: agch-dev

src/global.d.ts

@@ -1,5 +1,5 @@
 declare module '*.svg' {
-  import React = require('react');
+  import type * as React from 'react';
   export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
   const src: string;
   export default src;

src/pages/devtools/components/EventList/EventList.tsx

@@ -4,6 +4,7 @@ import {
   useImperativeHandle,
   useState,
   useCallback,
+  useEffect,
 } from 'react';
 
 import type { SearchMatch } from '@src/lib';
@@ -79,6 +80,13 @@ export const EventList = forwardRef<EventListHandle, EventListProps>(
       onScrollStateChange,
     });
 
+    // Store virtualizer in ref to avoid including in dependency arrays
+    // (complies with react-hooks/incompatible-library rule)
+    const virtualizerRef = useRef(virtualizer);
+    useEffect(() => {
+      virtualizerRef.current = virtualizer;
+    }, [virtualizer]);
+
     // Wrapper for toggle expand that also triggers remeasurement
     const handleToggleExpand = useCallback(
       (id: string) => {
@@ -103,7 +111,7 @@ export const EventList = forwardRef<EventListHandle, EventListProps>(
         if (eventIndex !== -1) {
           requestAnimationFrame(() => {
             requestAnimationFrame(() => {
-              virtualizer.scrollToIndex(eventIndex, {
+              virtualizerRef.current.scrollToIndex(eventIndex, {
                 align: 'start',
               });
             });
@@ -113,7 +121,7 @@ export const EventList = forwardRef<EventListHandle, EventListProps>(
         // Trigger remeasurement after state update
         remeasureItems();
       },
-      [expandedEventIds, listItems, onToggleExpand, virtualizer, remeasureItems]
+      [expandedEventIds, listItems, onToggleExpand, remeasureItems]
     );
 
     // Use sticky header hook

src/pages/devtools/components/EventList/useStickyHeader.ts

@@ -1,5 +1,5 @@
 import type { Virtualizer } from '@tanstack/react-virtual';
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 
 import type { SegmentEvent } from '@src/types';
 
@@ -39,6 +39,12 @@ export function useStickyHeader({
   const [stickyEventIndex, setStickyEventIndex] = useState<number | null>(null);
   // Track current sticky event ID to avoid unnecessary state updates
   const currentStickyIdRef = useRef<string | null>(null);
+  // Store virtualizer in ref to avoid including in dependency arrays
+  // (complies with react-hooks/incompatible-library rule)
+  const virtualizerRef = useRef(virtualizer);
+  useEffect(() => {
+    virtualizerRef.current = virtualizer;
+  }, [virtualizer]);
 
   /**
    * Handle scroll to detect if user has scrolled up and manage sticky header
@@ -47,7 +53,7 @@ export function useStickyHeader({
   const handleScroll = useCallback(
     (scrollTop: number) => {
       // Check for expanded events whose headers have scrolled out of view
-      const virtualItems = virtualizer.getVirtualItems();
+      const virtualItems = virtualizerRef.current.getVirtualItems();
       let foundStickyEvent: SegmentEvent | null = null;
       let foundStickyIndex: number | null = null;
 
@@ -91,7 +97,7 @@ export function useStickyHeader({
         setStickyEventIndex(foundStickyIndex);
       }
     },
-    [listItems, expandedEventIds, virtualizer]
+    [listItems, expandedEventIds]
   );
 
   /**
@@ -120,13 +126,13 @@ export function useStickyHeader({
       // Scroll to make the collapsed event visible (after collapse animation)
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          virtualizer.scrollToIndex(indexToScrollTo, {
+          virtualizerRef.current.scrollToIndex(indexToScrollTo, {
             align: 'start',
           });
         });
       });
     }
-  }, [stickyEvent, stickyEventIndex, onToggleExpand, virtualizer, clearSticky]);
+  }, [stickyEvent, stickyEventIndex, onToggleExpand, clearSticky]);
 
   return {
     stickyEvent,

src/pages/devtools/components/EventList/useVirtualization.ts

@@ -193,6 +193,7 @@ export function useVirtualization({
   );
 
   // Set up virtualizer with dynamic measurement
+  // Store in ref to avoid including in dependency arrays (complies with react-hooks/incompatible-library)
   const virtualizer = useVirtualizer({
     count: listItems.length,
     getScrollElement: () => scrollContainerRef.current,
@@ -205,6 +206,11 @@ export function useVirtualization({
       );
     },
   });
+  const virtualizerRef = useRef(virtualizer);
+  // Update ref when virtualizer changes (must be in effect, not during render)
+  useEffect(() => {
+    virtualizerRef.current = virtualizer;
+  }, [virtualizer]);
 
   // Handle scroll to detect if user has scrolled up and track scroll state
   const handleScroll = useCallback(() => {
@@ -232,7 +238,7 @@ export function useVirtualization({
 
       // Use requestAnimationFrame to ensure DOM is ready, then scroll
       requestAnimationFrame(() => {
-        virtualizer.scrollToIndex(listItems.length - 1, {
+        virtualizerRef.current.scrollToIndex(listItems.length - 1, {
           align: 'end',
           behavior: 'smooth',
         });
@@ -244,17 +250,17 @@ export function useVirtualization({
         }, 100);
       });
     }
-  }, [listItems.length, virtualizer]);
+  }, [listItems.length]);
 
   // Helper function to measure all items after DOM updates
   const measureAllItems = useCallback(() => {
     itemRefs.current.forEach((element) => {
       if (element) {
-        virtualizer.measureElement(element);
+        virtualizerRef.current.measureElement(element);
       }
     });
-    virtualizer.measure();
-  }, [virtualizer]);
+    virtualizerRef.current.measure();
+  }, []);
 
   // Remeasure all items (useful after expansion state changes)
   const remeasureItems = useCallback(() => {
@@ -290,7 +296,7 @@ export function useVirtualization({
     // Scroll to bottom with retry to ensure we actually reach the bottom
     // The virtualizer may not have measured new items immediately
     const scrollToEnd = () => {
-      virtualizer.scrollToIndex(listItems.length - 1, {
+      virtualizerRef.current.scrollToIndex(listItems.length - 1, {
         align: 'end',
         behavior: 'auto',
       });
@@ -325,7 +331,7 @@ export function useVirtualization({
       clearTimeout(retryTimeoutId);
       isProgrammaticScrollRef.current = false;
     };
-  }, [listItems.length, virtualizer, scrollContainerRef]);
+  }, [listItems.length, scrollContainerRef]);
 
   // Recalculate virtualizer when expansion state changes
   useEffect(() => {