[charts] Only update store if interaction item is different (#17851)

Author: bernardobelchior

packages/x-charts/src/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.ts

@@ -1,6 +1,7 @@
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { ChartPlugin } from '../../models';
 import { HighlightItemData, UseChartHighlightSignature } from './useChartHighlight.types';
 
@@ -33,6 +34,12 @@ export const useChartHighlight: ChartPlugin<UseChartHighlightSignature> = ({ sto
   });
 
   const setHighlight = useEventCallback((newItem: HighlightItemData) => {
+    const prevItem = store.getSnapshot().highlight.item;
+
+    if (fastObjectShallowCompare(prevItem, newItem)) {
+      return;
+    }
+
     params.onHighlightChange?.(newItem);
     store.update((prev) => ({ ...prev, highlight: { item: newItem } }));
   });

packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.ts

@@ -1,4 +1,5 @@
 import useEventCallback from '@mui/utils/useEventCallback';
+import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { ChartPlugin } from '../../models';
 import { Coordinate, UseChartInteractionSignature } from './useChartInteraction.types';
 import { ChartItemIdentifier, ChartSeriesType } from '../../../../models/seriesType/config';
@@ -55,13 +56,19 @@ export const useChartInteraction: ChartPlugin<UseChartInteractionSignature> = ({
   );
 
   const setItemInteraction = useEventCallback((newItem: ChartItemIdentifier<ChartSeriesType>) => {
-    store.update((prev) => ({
-      ...prev,
-      interaction: {
-        ...prev.interaction,
-        item: newItem,
-      },
-    }));
+    store.update((prev) => {
+      if (fastObjectShallowCompare(prev.interaction.item, newItem)) {
+        return prev;
+      }
+
+      return {
+        ...prev,
+        interaction: {
+          ...prev.interaction,
+          item: newItem,
+        },
+      };
+    });
   });
 
   const setPointerCoordinate = useEventCallback((coordinate: Coordinate | null) => {