Optimize dashcard rendering in edit mode (#43431)

* Avoid unnecessary re-renderings in dashcards

* replace useCallback with useMemo

* Optimize dashcard rendering in edit mode

frontend/src/metabase/dashboard/components/DashCard/DashCard.tsx

@@ -314,9 +314,9 @@ function DashCardInner({
             isLoading={isLoading}
             isPreviewing={isPreviewingCard}
             hasError={hasError}
-            onAddSeries={() => onAddSeries(dashcard)}
-            onRemove={() => onRemove(dashcard)}
-            onReplaceCard={() => onReplaceCard(dashcard)}
+            onAddSeries={onAddSeries}
+            onRemove={onRemove}
+            onReplaceCard={onReplaceCard}
             onUpdateVisualizationSettings={onUpdateVisualizationSettings}
             onReplaceAllVisualizationSettings={
               onReplaceAllVisualizationSettings

frontend/src/metabase/dashboard/components/DashCard/DashCardActionsPanel/DashCardActionsPanel.tsx

 import type { MouseEvent } from "react";
-import { useCallback, useState } from "react";
+import { useCallback, useState, memo } from "react";
 import { t } from "ttag";
 
 import { isActionDashCard } from "metabase/actions/utils";
@@ -33,9 +33,9 @@ interface Props {
   isLoading: boolean;
   isPreviewing: boolean;
   hasError: boolean;
-  onRemove: () => void;
-  onAddSeries: () => void;
-  onReplaceCard: () => void;
+  onRemove: (dashcard: DashboardCard) => void;
+  onAddSeries: (dashcard: DashboardCard) => void;
+  onReplaceCard: (dashcard: DashboardCard) => void;
   onReplaceAllVisualizationSettings: (
     dashcardId: DashCardId,
     settings: VisualizationSettings,
@@ -50,7 +50,7 @@ interface Props {
   onMouseDown: (event: MouseEvent) => void;
 }
 
-export function DashCardActionsPanel({
+function DashCardActionsPanelInner({
   series,
   dashboard,
   dashcard,
@@ -100,6 +100,30 @@ export function DashCardActionsPanel({
     [dashcard, onReplaceAllVisualizationSettings],
   );
 
+  const handleReplaceCard = useCallback(() => {
+    if (!dashcard) {
+      return;
+    }
+
+    onReplaceCard(dashcard);
+  }, [dashcard, onReplaceCard]);
+
+  const handleAddSeries = useCallback(() => {
+    if (!dashcard) {
+      return;
+    }
+
+    onAddSeries(dashcard);
+  }, [dashcard, onAddSeries]);
+
+  const handleRemoveCard = useCallback(() => {
+    if (!dashcard) {
+      return;
+    }
+
+    onRemove(dashcard);
+  }, [dashcard, onRemove]);
+
   if (dashcard) {
     buttons.push(
       <DashCardTabMenu
@@ -165,7 +189,7 @@ export function DashCardActionsPanel({
         key="replace-question"
         aria-label={t`Replace`}
         tooltip={t`Replace`}
-        onClick={onReplaceCard}
+        onClick={handleReplaceCard}
       >
         <Icon name="refresh_downstream" />
       </DashCardActionButton>,
@@ -192,7 +216,7 @@ export function DashCardActionsPanel({
         <AddSeriesButton
           key="add-series-button"
           series={series}
-          onClick={onAddSeries}
+          onClick={handleAddSeries}
         />,
       );
     }
@@ -228,7 +252,7 @@ export function DashCardActionsPanel({
       <DashCardActionButtonsContainer>
         {buttons}
         <DashCardActionButton
-          onClick={onRemove}
+          onClick={handleRemoveCard}
           tooltip={t`Remove`}
           analyticsEvent="Dashboard;Remove Card Modal"
         >
@@ -238,3 +262,5 @@ export function DashCardActionsPanel({
     </DashCardActionsPanelContainer>
   );
 }
+
+export const DashCardActionsPanel = memo(DashCardActionsPanelInner);