Memoize Flow Chart component

Author: kshmidt-digma

src/components/Agentic/IncidentDetails/IncidentMetaData/IdeToolbar/index.tsx

@@ -20,7 +20,7 @@ const IDE_ICONS: Record<string, ComponentType<IconProps>> = {
 export const IdeToolbar = ({ incidentId }: IdeToolbarProps) => {
   const [ides, setIdes] = useState<VSCodeExtensionInfo[]>();
 
-  const handleIdeButtonClick = (ide: string) => {
+  const handleIdeButtonClick = (ide: string) => () => {
     sendUserActionTrackingEvent(trackingEvents.INCIDENT_IDE_BUTTON_CLICKED, {
       ide
     });
@@ -68,7 +68,7 @@ export const IdeToolbar = ({ incidentId }: IdeToolbarProps) => {
                 size={"large"}
                 key={ide.ideUriScheme}
                 icon={(props) => <IdeIcon {...props} />}
-                onClick={() => handleIdeButtonClick(ide.ideUriScheme)}
+                onClick={handleIdeButtonClick(ide.ideUriScheme)}
               />
             </Tooltip>
           );

src/components/Agentic/IncidentDetails/index.tsx

@@ -1,6 +1,6 @@
 import { Allotment } from "allotment";
 import "allotment/dist/style.css";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router";
 import { useTheme } from "styled-components";
 import { useAgenticDispatch } from "../../../containers/Agentic/hooks";
@@ -113,6 +113,20 @@ export const IncidentDetails = () => {
     );
   };
 
+  const handleAgentSelect = useCallback(
+    (id: string | null) => {
+      setSearchParams((params) => {
+        if (id) {
+          params.set("agent", id);
+        } else {
+          params.delete("agent");
+        }
+        return params;
+      });
+    },
+    [setSearchParams]
+  );
+
   useEffect(() => {
     setAgentViewMode("summary");
   }, [agentId]);
@@ -137,17 +151,6 @@ export const IncidentDetails = () => {
     (agent) => agent.name === `${agentId}_chat`
   );
 
-  const handleAgentSelect = (id: string | null) => {
-    setSearchParams((params) => {
-      if (id) {
-        params.set("agent", id);
-      } else {
-        params.delete("agent");
-      }
-      return params;
-    });
-  };
-
   if (!incidentData && isLoading) {
     return (
       <s.Container>