fix(profiling): fix react hook dependencies (#34030)

* fix(profiling): fix react hook dependencies

* ref(profiling): move draw call

static/app/components/profiling/boundTooltip.tsx

@@ -12,7 +12,7 @@ const useCachedMeasure = (string: string, font: string): Rect => {
     const context = getContext(document.createElement('canvas'), '2d');
     context.font = font;
     return context;
-  }, []);
+  }, [font]);
 
   return useMemo(() => {
     if (cache.current[string]) {

static/app/components/profiling/flamegraphSearch.tsx

@@ -141,7 +141,7 @@ function FlamegraphSearch({
     if (frames[search.index]) {
       onZoomIntoFrame(frames[search.index]);
     }
-  }, [search.results, search.index]);
+  }, [search.results, search.index, onZoomIntoFrame]);
 
   const handleChange: (value: string) => void = useCallback(
     value => {
@@ -176,7 +176,7 @@ function FlamegraphSearch({
       type: 'set search index position',
       payload: search.index + 1,
     });
-  }, [search.results, search.index]);
+  }, [search.results, search.index, dispatchSearch]);
 
   const onPreviousSearchClick = useCallback(() => {
     const frames = memoizedSortFrameResults(search.results);
@@ -196,7 +196,7 @@ function FlamegraphSearch({
       type: 'set search index position',
       payload: search.index - 1,
     });
-  }, [search.results, search.index]);
+  }, [search.results, search.index, dispatchSearch]);
 
   const handleKeyDown = useCallback(
     (evt: React.KeyboardEvent<HTMLInputElement>) => {

static/app/components/profiling/flamegraphZoomView.tsx

@@ -133,7 +133,7 @@ function FlamegraphZoomView({
       return null;
     }
     return new SelectedFrameRenderer(flamegraphOverlayCanvasRef);
-  }, [flamegraphOverlayCanvasRef, flamegraph, flamegraphTheme]);
+  }, [flamegraphOverlayCanvasRef]);
 
   const hoveredNode = useMemo(() => {
     if (!configSpaceCursor || !flamegraphRenderer) {
@@ -142,10 +142,6 @@ function FlamegraphZoomView({
     return flamegraphRenderer.getHoveredNode(configSpaceCursor);
   }, [configSpaceCursor, flamegraphRenderer]);
 
-  useEffect(() => {
-    scheduler.draw();
-  }, [flamegraphState.search.results]);
-
   useEffect(() => {
     const onKeyDown = (evt: KeyboardEvent) => {
       if (!flamegraphRenderer) {
@@ -198,7 +194,14 @@ function FlamegraphZoomView({
     return () => {
       document.removeEventListener('keydown', onKeyDown);
     };
-  }, [flamegraphRenderer, previousState, nextState, scheduler]);
+  }, [
+    flamegraphRenderer,
+    canvasPoolManager,
+    dispatchFlamegraphState,
+    previousState,
+    nextState,
+    scheduler,
+  ]);
 
   const previousInteraction = usePrevious(lastInteraction);
   const beforeInteractionConfigView = useRef<Rect | null>(null);
@@ -219,7 +222,7 @@ function FlamegraphZoomView({
     ) {
       dispatch({type: 'checkpoint', payload: flamegraphRenderer.configView.clone()});
     }
-  }, [lastInteraction, flamegraphRenderer]);
+  }, [lastInteraction, flamegraphRenderer, dispatch, previousInteraction]);
 
   useEffect(() => {
     if (!flamegraphRenderer) {
@@ -231,6 +234,7 @@ function FlamegraphZoomView({
     };
 
     scheduler.registerBeforeFrameCallback(drawRectangles);
+    scheduler.draw();
 
     return () => {
       scheduler.unregisterBeforeFrameCallback(drawRectangles);
@@ -328,6 +332,7 @@ function FlamegraphZoomView({
     gridRenderer,
     selectedNode,
     hoveredNode,
+    selectedFrameRenderer,
   ]);
 
   useEffect(() => {
@@ -355,7 +360,7 @@ function FlamegraphZoomView({
       flamegraphRenderer.setConfigView(
         new Rect(
           frame.start,
-          flamegraph.inverted
+          flamegraphRenderer.flamegraph.inverted
             ? flamegraphRenderer.configSpace.height -
               flamegraphRenderer.configView.height -
               frame.depth +
@@ -402,7 +407,13 @@ function FlamegraphZoomView({
       }
     );
     return () => observer.disconnect();
-  }, [scheduler, flamegraphCanvasRef, flamegraphOverlayCanvasRef, flamegraphRenderer]);
+  }, [
+    canvasPoolManager,
+    scheduler,
+    flamegraphCanvasRef,
+    flamegraphOverlayCanvasRef,
+    flamegraphRenderer,
+  ]);
 
   useEffect(() => {
     canvasPoolManager.registerScheduler(scheduler);
@@ -462,7 +473,6 @@ function FlamegraphZoomView({
       selectedNode,
       hoveredNode,
       canvasPoolManager,
-      startPanVector,
       lastInteraction,
     ]
   );
@@ -518,7 +528,7 @@ function FlamegraphZoomView({
 
       setStartPanVector(physicalMousePos);
     },
-    [flamegraphRenderer, startPanVector]
+    [flamegraphRenderer, startPanVector, canvasPoolManager]
   );
 
   const onCanvasMouseMove = useCallback(
@@ -540,13 +550,7 @@ function FlamegraphZoomView({
         setLastInteraction(null);
       }
     },
-    [
-      flamegraphRenderer,
-      setConfigSpaceCursor,
-      onMouseDrag,
-      lastInteraction,
-      startPanVector,
-    ]
+    [flamegraphRenderer, setConfigSpaceCursor, onMouseDrag, startPanVector]
   );
 
   const onCanvasMouseLeave = useCallback(() => {

static/app/components/profiling/flamegraphZoomViewMinimap.tsx

@@ -185,7 +185,7 @@ function FlamegraphZoomViewMinimap({
       flamegraphMiniMapRenderer.setConfigView(
         new Rect(
           frame.start,
-          flamegraph.inverted
+          flamegraphMiniMapRenderer.flamegraph.inverted
             ? flamegraphMiniMapRenderer.configSpace.height -
               flamegraphMiniMapRenderer.configView.height -
               frame.depth +
@@ -215,6 +215,7 @@ function FlamegraphZoomViewMinimap({
 
   const previousInteraction = usePrevious(lastInteraction);
   const beforeInteractionConfigView = useRef<Rect | null>(null);
+
   useEffect(() => {
     if (!flamegraphMiniMapRenderer) {
       return;
@@ -235,7 +236,7 @@ function FlamegraphZoomViewMinimap({
         payload: flamegraphMiniMapRenderer.configView.clone(),
       });
     }
-  }, [lastInteraction, flamegraphMiniMapRenderer]);
+  }, [lastInteraction, flamegraphMiniMapRenderer, dispatch, previousInteraction]);
 
   const [startDragVector, setStartDragConfigSpaceCursor] = useState<vec2 | null>(null);
   const [lastDragVector, setLastDragVector] = useState<vec2 | null>(null);
@@ -268,7 +269,7 @@ function FlamegraphZoomViewMinimap({
   useEffect(() => {
     canvasPoolManager.registerScheduler(scheduler);
     return () => canvasPoolManager.unregisterScheduler(scheduler);
-  }, [scheduler]);
+  }, [scheduler, canvasPoolManager]);
 
   const onMouseDrag = useCallback(
     (evt: React.MouseEvent<HTMLCanvasElement>) => {

static/app/views/profiling/landing/profilingScatterChart.tsx

@@ -89,7 +89,7 @@ function ProfilingScatterChart({
         projects,
         theme,
       }),
-    [location, datetime, theme, data]
+    [location, datetime, theme, data, organization, projects]
   );
 
   const handleColorEncodingChange = useCallback(