LegendIcon: only render color picker when the props change (#33141)

packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx

@@ -8,25 +8,29 @@ interface Props {
   onColorChange: (color: string) => void;
 }
 
-/**
- * @internal
- */
-export const VizLegendSeriesIcon: React.FunctionComponent<Props> = ({ disabled, color, onColorChange }) => {
-  return disabled ? (
-    <SeriesIcon color={color} />
-  ) : (
-    <SeriesColorPicker color={color} onChange={onColorChange} enableNamedColors>
-      {({ ref, showColorPicker, hideColorPicker }) => (
-        <SeriesIcon
-          color={color}
-          className="pointer"
-          ref={ref}
-          onClick={showColorPicker}
-          onMouseLeave={hideColorPicker}
-        />
-      )}
-    </SeriesColorPicker>
-  );
-};
+export const VizLegendSeriesIcon = React.memo<Props>(
+  ({ disabled, color, onColorChange }) => {
+    return disabled ? (
+      <SeriesIcon color={color} />
+    ) : (
+      <SeriesColorPicker color={color} onChange={onColorChange} enableNamedColors>
+        {({ ref, showColorPicker, hideColorPicker }) => (
+          <SeriesIcon
+            color={color}
+            className="pointer"
+            ref={ref}
+            onClick={showColorPicker}
+            onMouseLeave={hideColorPicker}
+          />
+        )}
+      </SeriesColorPicker>
+    );
+  },
+  // areEqual -- return true if they are the same.
+  // onColorChange updates frequently, so ignore that
+  (prevProps, nextProps) => {
+    return prevProps.color === nextProps.color && prevProps.disabled === nextProps.disabled;
+  }
+);
 
 VizLegendSeriesIcon.displayName = 'VizLegendSeriesIcon';