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

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

@@ -8,10 +8,8 @@ interface Props {
   onColorChange: (color: string) => void;
 }
 
-/**
- * @internal
- */
-export const VizLegendSeriesIcon: React.FunctionComponent<Props> = ({ disabled, color, onColorChange }) => {
+export const VizLegendSeriesIcon = React.memo<Props>(
+  ({ disabled, color, onColorChange }) => {
     return disabled ? (
       <SeriesIcon color={color} />
     ) : (
@@ -27,6 +25,12 @@ export const VizLegendSeriesIcon: React.FunctionComponent<Props> = ({ disabled,
         )}
       </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';